/*!****************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/subpage-hero/style.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * mea/subpage-hero - one hero, three parameterised variants.
 *
 * Geometry and type come from the subpage hero frames of Figma file
 * 9SWHsksPbiz0sj8IF30o5u. Every colour resolves through src/_shared/tokens.css;
 * the only colour literals in this block arrive as editor data (bg_color,
 * scrim_color, glow_color) and are composed in render.php.
 *
 * WHY THE SCRIM IS A PARAMETER
 * The scrim is a fill on each Hero Section frame, so it varies page by page
 * with no rule. Values below are the exact Figma fills, converted from each
 * frame's gradientTransform into CSS (angle, then dark stop -> clear stop) and
 * normalised dark-first. Read them as `scrim_angle / scrim_start / scrim_end
 * @ scrim_strength`:
 *
 *   /for-carriers      2005:6566  85.0663deg  32.245% -> 52.138%  @ 1.0
 *   /for-reinsurers    2043:4184  85.2778deg  32.352% -> 52.304%  @ 1.0
 *   /for-mgas          2043:4193  84.8153deg  32.113% -> 51.932%  @ 1.0
 *   /for-brokers       2043:4202  84.8549deg  32.134% -> 51.965%  @ 1.0
 *   /about-us          2008:8790  70.8047deg   6.205% -> 54.247%  @ 1.0
 *   /team...           2008:7979  77.1677deg  43.543% -> 64.212%  @ 0.6
 *   /careers           2043:4223  90deg       25.132% -> 65.514%  @ 0.6
 *   /working-with-mea  2008:8508  80.9809deg  33.610% -> 69.080%  @ 0.6
 *   /case-studies      2008:7312  91.5261deg  35.686% -> 55.488%  @ 0.6
 *   /insights          2008:7789  no gradient at all - uniform wash variant:
 *                                 ground #021412, photo held at 30%
 *   /products          2002:4529  84.5481deg  31.350% -> 80.916%  @ 0.6
 *   /mea-ingestion     2003:4766 102.9393deg  45.026% -> 75.574%  @ 0.5
 *   /mea-operations    2003:5047  74.2809deg  40.362% -> 60.937%  @ 0.6
 *   /mea-underwriting  2003:5858  78.6436deg  45.712% -> 59.822%  @ 0.6
 *   /mea-full-stack    2003:6080  90deg       35.000% -> 61.000%  @ 0.6
 *   /bpo-solutions     2043:4235  90deg       35.000% -> 61.000%  @ 0.5
 *
 * The attribute DEFAULTS stay at 80.5618deg / 41.458% -> 62.336% @ 0.6, the
 * values this block shipped with, so the 17 pages already using it render
 * unchanged until a page opts into its own numbers.
 */
.mea-subpage-hero {
  /* Every subpage hero insets 150 against the 88px homepage default
     --mea-gutter carries, and against the 120 the body sections below it
     use - that 30px step is the design. One value sitewide since
     2026-09-16; render.php's MEA_SUBPAGE_HERO_GUTTER is the source and
     overwrites both of these inline on every instance, so these two are
     only the unstyled fallback. 150 / 1440 = 10.4167vw. */
  --mea-hero-gutter: 150px;
  --mea-hero-gutter-vw: 10.4167vw;
  --mea-gutter: clamp(min(20px, var(--mea-hero-gutter)), var(--mea-hero-gutter-vw), var(--mea-hero-gutter));
  --mea-hero-pad-top: 120px;
  --mea-hero-pad-top-vw: 8.3333vw;
  --mea-hero-pad-bottom: 120px;
  --mea-hero-pad-bottom-vw: 8.3333vw;
  --mea-hero-eyebrow-pad: 0;
  --mea-hero-gap: 24px;
  --mea-hero-cta-gap: 8px;
  --mea-hero-stats-gap: 8px;
  --mea-hero-headline-maxw: 683px;
  --mea-hero-subhead-maxw: 447px;
  --mea-hero-bg: var(--mea-dark);
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  /* The clamp floor has to stay below the ceiling, or clamp() returns the
     floor and a deliberately small padding is silently ignored - measured on
     the case-study single, which pads 55 at the bottom and rendered 64.
     The top floor is 104px, not 64 - site-header is `position: fixed` at
     72px tall (see AGENTS.md's frozen 72px header decision), so a 64px
     floor left only 64px of clearance and the header overlapped the
     eyebrow on every subpage hero below ~1248px wide (8.3333vw crosses
     104px at 1248px). 104px matches the homepage's own mea/hero, which
     flattens to `padding: 104px 0 ...` at the same mobile breakpoint. */
  padding-top: clamp(min(104px, var(--mea-hero-pad-top)), var(--mea-hero-pad-top-vw), var(--mea-hero-pad-top));
  padding-bottom: clamp(min(64px, var(--mea-hero-pad-bottom)), var(--mea-hero-pad-bottom-vw), var(--mea-hero-pad-bottom));
  background-color: var(--mea-hero-bg);
  /* Set per page from the Figma fill's imageTransform, through custom
     properties so the breakpoint rule below can floor them. */
  background-size: var(--mea-hero-bg-size, cover);
  background-position: var(--mea-hero-bg-position, center);
  background-repeat: no-repeat;
  --mea-fg: var(--mea-on-dark);
  color: var(--mea-on-dark);
}

/* The three background layers. Each is painted only when its attribute asks
   for it, so a hero carries exactly the layers Figma gives it. */
.mea-subpage-hero__wash,
.mea-subpage-hero__scrim,
.mea-subpage-hero__glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* render.php hands the scrim over as custom properties so this file can swap
   it at a breakpoint; an inline background-image could not be overridden. */
.mea-subpage-hero__scrim {
  background-image: var(--mea-hero-scrim, none);
}

/* BELOW THE DESIGN WIDTH THE HERO IS INTERPOLATED, AND THAT IS DELIBERATE.
   Figma draws these heroes only at 1440. Two things about that frame are
   width-relative while the things they have to cover are not, so both drift as
   the viewport changes and both were failing silently:

   1. The scrim's stops are percentages of the hero, but the copy column is
      capped in px, so the copy takes a larger share of the width at every
      narrower viewport and eventually crosses the clear end of the ramp. On
      /careers/, as the share of the box below 4.5:1 against white: 1440 0%,
      1280 2.8%, 1180 8.0%, 1024 12.7%, 768 16.5% headline and 26.4% subhead,
      worst case 1.26:1.
   2. A Figma CROP fill is a width-relative scale, so it shrinks with the
      viewport while the hero's height does not. /careers/ declares 119.44% and
      left the lower half of the hero as bare bg_color at 375.

   The crop fallback (#2) still runs the full 1439px-768px-and-below range -
   `cover` is the minimal correct floor and is what the block already
   defaults to when a page declares no crop at all.

   The SCRIM fallback (#1) no longer does. Lia's call (2026-09-10): the
   directional gradient runs unmodified from >=1440 down through 768px -
   the flat, contrast-safe substitute only takes over below that, at the
   same width the crop fallback already uses as its own mobile floor
   elsewhere in this file. This knowingly re-admits the contrast failure
   measured above for 768-1439px, block-wide, on every page using this
   hero - not one instance's opt-in. A lighter flat floor was measured and
   rejected in the ORIGINAL version of this rule (holding AA at 1024 needed
   alpha >= 0.443, no margin against a different photograph) but that
   finding is about the flat substitute's own strength, not about whether
   the gradient itself is safe in this range - it measurably is not, per
   the numbers above, and this change ships anyway on explicit instruction.

   Measured on /careers/ (before this change existed), as the share of the
   eyebrow, headline and subhead boxes below 4.5:1 WITH the flat fallback
   covering the full 1439px range: 0% at 375, 480, 640, 768, 900, 1023,
   1024, 1180, 1280, 1439, 1440, 1600 and 1920, worst ratio anywhere 6.74:1.
   That measurement no longer describes 768-1439px now that this rule only
   covers <768px there - re-verify contrast per page if this is revisited. */
@media (max-width: 1439px) {
  /* A Figma CROP is authored against the 1440 frame and its scale is
     width-relative, so it shrinks with the viewport while the hero's height
     does not: /careers/ declares 119.44% and left the lower half of the hero
     as bare bg_color at 375. `cover` is the minimal correct floor and is what
     the block already defaults to when a page declares no crop. */
  .mea-subpage-hero {
    background-size: cover;
  }
  /* `scrimMobileUp`, opt-in: the fade below washes the WHOLE photo
     at one strength, which dims the subject exactly as much as the empty
     background behind them when the subject sits near the top of the frame
     (bg_position anchored there, as /for-carriers' is).
     Earlier passes: a straight bottom-to-top fade left the headline (upper
     half of the frame) almost unshielded; a plateau pinned to the measured
     copy span fixed that but read as an odd banded edge across the photo;
     a fade starting at the 50% midpoint still left the headline mostly in
     the clear zone. Lia's call (2026-09-09): move the fade's own top edge
     from 50% to 70%, so more of the frame - and more of the headline,
     which measured 46.5-64.3% on this gradient's own axis - sits inside
     the ramp instead of above it; only the top 30% (her face) stays fully
     clear. Darkening runs from there down to the bottom, ending darker
     than the flat fallback's own scrim_strength (--mea-hero-scrim-bottom,
     +0.2 capped at 1 - see render.php) since the dark portion now carries
     the full contrast job alone instead of sharing it with a wash over the
     whole photo. /for-carriers first. */
  .mea-subpage-hero--scrim-up .mea-subpage-hero__scrim {
    background-image: linear-gradient(0deg, var(--mea-hero-scrim-bottom, transparent) 0%, transparent var(--mea-hero-scrim-up-fade, 70%));
    background-color: transparent;
  }
}
/* Flat-fallback floor for the directional scrim, per Lia (2026-09-10): the
   directional gradient's contrast failure (see the comment above, up to
   1.26:1) is only substituted with the flat scrim below 768px now - from
   768px up to 1439px every page gets the same raw directional gradient as
   >=1440px, unmodified. This is a shared-default change, not an opt-in:
   every page using this block loses the 768-1439px contrast fix unless it
   separately opts into `scrimMobileUp`, whose own fade (above) still
   covers that instance regardless of this rule's breakpoint. */
@media (max-width: 767px) {
  .mea-subpage-hero__scrim {
    background-image: none;
    background-color: var(--mea-hero-scrim-flat, transparent);
  }
}
/* `scrimMobileUpFadeSmall`: a second, later fade-to-transparent stop below
   768px - /for-carriers wants 90% there against 70% at 769-1023px (the rule
   above), same two-tier shape as the eyebrow clearance. Falls back to the
   769-1023px value itself if unset. Declared after the rule above so it
   wins at the narrower widths both queries match. */
@media (max-width: 768px) {
  .mea-subpage-hero--scrim-up .mea-subpage-hero__scrim {
    background-image: linear-gradient(0deg, var(--mea-hero-scrim-bottom, transparent) 0%, transparent var(--mea-hero-scrim-up-fade-sm, var(--mea-hero-scrim-up-fade, 70%)));
    background-color: transparent;
  }
}
/* `wideCrop`, opt-in per instance: pushes the breakpoint above down to
   1024px instead of 1439px, so 1024-1439px keeps the >=1440 desktop
   treatment (Figma crop + directional scrim) rather than the flat-scrim
   fallback. Design's own call, /for-carriers first (2026-09-09) - this
   knowingly re-admits the contrast risk the fallback exists to fix, and the
   crop-shrinks-faster-than-the-hero risk documented above, across
   1024-1439px, for whichever instance opts in. Both extra classes give this
   higher specificity than the plain rule above, so source order does not
   matter; every instance that does not opt in is byte-identical to before. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .mea-subpage-hero.mea-subpage-hero--wide-crop {
    background-size: var(--mea-hero-bg-size, cover);
  }
  .mea-subpage-hero--wide-crop .mea-subpage-hero__scrim {
    background-image: var(--mea-hero-scrim, none);
    background-color: transparent;
  }
}
/* `mobileBgShiftX`, opt-in per instance: nudges the photo horizontally below
   768px by a fixed px amount on top of bg_position's own value (see the
   render.php comment on --mea-hero-bg-position-mobile for how the two
   combine). No-op - falls back to the unshifted position - on every
   instance that does not set it. Was <1024px until 2026-09-10 - narrowed to
   <768px on About Us's own call: the shift is a narrow-mobile crop fix, not
   a tablet-range one, and 769-1023px should hold bg_position's own
   unshifted value. /for-carriers first (2026-09-09), breakpoint corrected
   2026-09-10 - re-verify /for-carriers isn't relying on the shift holding
   through 769-1023px before shipping this to a third page. */
@media (max-width: 768px) {
  .mea-subpage-hero {
    background-position: var(--mea-hero-bg-position-mobile, var(--mea-hero-bg-position, center));
  }
}
/* `mobileBgKeepRatio`, opt-in per instance: between 621px and 1439px, use
   bg_size/bg_position exactly as authored instead of the shared fallback's
   forced `cover` - see the render.php comment on this attribute for why
   `cover` over-zooms once it becomes height-constrained, and why that does
   NOT happen yet in this range. No-op on every instance that does not set
   it, so every other page's fallback is unchanged. BPO Solutions first
   (2026-09-10) - the 621px floor is THIS instance's own measured crossover
   (bg_size's own ratio stops covering the container's height below it, see
   the --mea-hero-bg-size-mobile-sm rule for the tier that takes over there);
   a future instance with a different photo/copy length needs its own
   crossover re-measured, not this number reused. */
@media (min-width: 621px) and (max-width: 1439px) {
  .mea-subpage-hero--keep-ratio {
    background-size: var(--mea-hero-bg-size, cover);
    background-position: var(--mea-hero-bg-position, center);
  }
}
/* `mobileBgPositionYMid`, opt-in per instance: bg_position's Y is a share of
   (container height - image height), which stays a deep, stable crop while
   the image is taller than the container (roughly 1439-768px here) but
   flips sign and grows fast once the image shrinks under the container's
   own height - see the render.php comment on this attribute. Narrowed to
   621-767px, the span where that flip actually happens on this instance;
   outside it the rule above's own percentage already holds steady. */
@media (min-width: 621px) and (max-width: 767px) {
  .mea-subpage-hero--keep-ratio {
    background-position-y: var(--mea-hero-bg-position-y-mid, center);
  }
}
/* `mobileBgSizeSmall` / `mobileBgPositionSmall`, opt-in per instance: a full
   size + position override below 620px, for a subject that renders too
   large at the page's own bg_size to fit inside the eyebrow's clearance no
   matter where it's positioned - see the render.php comment on
   --mea-hero-bg-size-mobile-sm. Falls back to size `cover` and to
   mobileBgShiftX's own position (or bg_position's, or `center`) on every
   instance that does not set these, so this is additive, not a
   replacement for the rule above. About Us first (2026-09-10) at <=768px;
   narrowed to <=620px for BPO Solutions to hand off to `mobileBgKeepRatio`
   above it, per that attribute's own measured crossover. */
@media (max-width: 620px) {
  .mea-subpage-hero {
    background-size: var(--mea-hero-bg-size-mobile-sm, cover);
    background-position: var(--mea-hero-bg-position-mobile-sm, var(--mea-hero-bg-position-mobile, var(--mea-hero-bg-position, center)));
  }
}
.mea-subpage-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--mea-hero-gap);
  align-items: flex-start;
}

.mea-subpage-hero.is-align-center .mea-subpage-hero__content {
  align-items: center;
  text-align: center;
}

/* Figma groups the eyebrow with the headline at a fixed 24px and lets the
   gap below the group vary per page, so the group is its own flex column.
   The extra 60px margin-top is not in Figma at all - it exists because
   site-header is `position: fixed` and floats OVER the hero rather than
   pushing it down, so the hero's own padding-top is measured from the
   hero's true top edge (y=0), not from below the header. The header eats
   the first ~72px (60px once `.is-scrolled`) of that padding visually, so
   every subpage hero read as having noticeably less clearance above its
   eyebrow than its padding-top value implied - confirmed live on
   /mea-ingestion, but the header overlap is identical on all 17 pages this
   block renders on, so the fix lives here rather than as a per-page
   attribute. Added to the text column specifically, not the section's own
   padding-top, so the background photo/scrim still runs full-bleed behind
   the header with no gap of bare ground above it. */
.mea-subpage-hero__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: inherit;
  margin-top: 60px;
  width: 100%;
}

.mea-subpage-hero.is-align-left .mea-subpage-hero__head {
  align-items: flex-start;
}

/* `mobileGapHalfSmall`, opt-in: halves BOTH the eyebrow-headline gap
   (__head's own, welded 24px on every instance - there is no per-instance
   var for it yet, hence the literal 12px rather than a calc()) and the
   headline-subhead / subhead-cta gap (__content's --mea-hero-gap, calc()'d
   since that one IS already a per-instance var). One flag covers all three
   gaps because "reduce the gap between each text element" is exactly what
   halving both of the block's two spacing properties means structurally -
   there is no fourth gap to separately dial. /for-carriers first
   (2026-09-09). */
@media (max-width: 768px) {
  .mea-subpage-hero--gap-half-sm .mea-subpage-hero__head {
    gap: 12px;
  }
  .mea-subpage-hero--gap-half-sm .mea-subpage-hero__content {
    gap: calc(var(--mea-hero-gap) * 0.5);
  }
}
.mea-subpage-hero__eyebrow {
  margin: 0;
  padding-top: var(--mea-hero-eyebrow-pad);
  /* 0 unless the preset sets `eyebrow_pad_b` - only /mea-underwriting's own
     does, because R6 draws that hero's eyebrow wrapper `py-[6px]` rather
     than padding the top alone (2545:2263). Every other preset renders
     exactly as before. */
  padding-bottom: var(--mea-hero-eyebrow-pad-b, 0);
  color: var(--mea-accent);
  /* `mobileEyebrowPadTop`, opt-in per instance: extra clearance above the
     eyebrow below 1024px, ON TOP of the group's own padding-top - not a
     replacement for it, hence the addition rather than a straight override.
     Separate from __head's own 60px header-clearance margin (that fix is
     universal to all 17 pages; this is a per-instance request layered on
     top of it). /for-carriers first (2026-09-09). */
}
@media (max-width: 1023px) {
  .mea-subpage-hero__eyebrow {
    padding-top: calc(var(--mea-hero-eyebrow-pad) + var(--mea-hero-eyebrow-pad-mobile, 0px));
  }
}
.mea-subpage-hero__eyebrow {
  /* `mobileEyebrowPadTopSmall`: a second, larger clearance below 768px -
     /for-carriers wants 70px at 769-1023px (the rule above) and 140px
     below that, not one value all the way down. Falls back to the
     769-1023px value itself if unset, so setting only the first attribute
     still holds it at every width below 1024px. Declared after the
     1023px rule so it wins at the narrower widths both queries match. */
}
@media (max-width: 768px) {
  .mea-subpage-hero__eyebrow {
    padding-top: calc(var(--mea-hero-eyebrow-pad) + var(--mea-hero-eyebrow-pad-mobile-sm, var(--mea-hero-eyebrow-pad-mobile, 0px)));
  }
}
.mea-subpage-hero__eyebrow {
  /* A deliberate rebind away from the shared sans, not a restatement of it -
     Figma sets the eyebrow in Fira Code Light on every subpage hero. */
  font-family: var(--mea-font-mono);
  font-weight: var(--mea-weight-light);
  /* Interpolated below 1024: the Figma frames only specify 1440. */
  font-size: clamp(16px, 1.3889vw, var(--mea-type-eyebrow-size));
  letter-spacing: var(--mea-type-eyebrow-ls);
  /* Figma leaves the eyebrow line-height AUTO; the 20px Fira Code text node
     measures 26px high on every subpage hero, so 1.3 is the real value.
     `line-height: 1` shipped here and cost 6px of vertical rhythm. */
  line-height: 1.3;
}

/**
 * WEIGHT IS SET PER ELEMENT ON PURPOSE - DO NOT REMOVE IT AS DUPLICATION.
 * The theme paints `font-weight: 300` on the same bare `p` / `span` / `h1-h6`
 * selectors it paints Poppins on, and `src/_shared/type.css` deliberately does
 * NOT neutralize weight (see its note: a mea heading with no weight of its own
 * renders Light). So every weight below is load-bearing.
 *
 * FAMILY IS NOT SET HERE, ALSO ON PURPOSE. `type.css` carries the family for
 * every mea block using `font-family: inherit`, precisely so a wrapper that
 * rebinds the family - a mono panel, this block's Fira Code eyebrow - has it
 * flow down to its children. Declaring an absolute `var(--mea-font-sans)` on a
 * text element here would silently break that inheritance chain, which is why
 * the four rules that used to sit on the headline, its spans, the subhead and
 * the sub-line are gone. The eyebrow's `--mea-font-mono` stays: it is a
 * deliberate rebind, not a restatement of the default.
 */
.mea-subpage-hero__headline {
  margin: 0;
  max-width: var(--mea-hero-headline-maxw);
  font-weight: var(--mea-weight-regular);
  /* The shipped step is `clamp(36px, 4.4444vw, 64px)` (64 at 1440), which is
     what all 18 existing heroes draw. `headline_size` overrides it as a
     whole clamp so the responsive ratio survives - see render.php. */
  font-size: var(--mea-hero-headline-size, clamp(36px, 4.4444vw, 64px));
  line-height: var(--mea-type-h1-lh);
  /* `headline_tracking`. Unset, this is `normal` - what all 18 pre-R6
     heroes draw. R6's /mea-ingestion block (2545:1802) is `tracking-[-1px]`.
     See render.php. */
  letter-spacing: var(--mea-hero-headline-ls, normal);
}

.mea-subpage-hero__headline-lead,
.mea-subpage-hero__headline-emph,
.mea-subpage-hero__headline-trail {
  font-weight: var(--mea-weight-regular);
  line-height: inherit;
  /* `headline_lead`/`headline_emph` are plain strings through esc_html (no
     markup allowed), so a page with a genuine hard line break in Figma (e.g.
     /for-mgas' "...grows GWP" / "without growing headcount.") carries it as
     a literal "\n" in the attribute, which default white-space collapses to
     a space. Same fix, same precedent as `.mea-faq-item__answer`'s
     `pre-line` for its own esc_html'd "\n\n". Scoped to these two spans
     (not the shared `.mea-subpage-hero__headline` parent) so it does not
     also apply to the plain whitespace template markup emits BETWEEN the
     two spans, which is a sibling text node of the parent and must keep
     collapsing to a single space on every other page's single-line
     headline. */
  white-space: pre-line;
}

/* Figma splits every subpage headline into one Inter Bold clause and one Inter
   Regular clause, on either side. The lead span carries the weight switch so a
   bold-first headline needs no re-ordering of the two existing attributes.
   `__headline-trail` is the optional plain run AFTER the emphasis, for R6's
   careers hero (2545:3939), which bolds a clause in the MIDDLE; it is the
   lead's twin and takes the same weight, so both share every rule here. */
.mea-subpage-hero__headline-lead.is-weight-bold,
.mea-subpage-hero__headline-trail.is-weight-bold {
  font-weight: var(--mea-weight-bold);
}

/* R6's three case-study heroes set the whole headline Inter Medium (3012:10283
   and its two siblings), with the emphasis clause carrying Bold on top. */
.mea-subpage-hero__headline-lead.is-weight-medium,
.mea-subpage-hero__headline-trail.is-weight-medium {
  font-weight: var(--mea-weight-medium);
}

/* Default emphasis stays the lime span this block shipped with. Figma's own
   subpage heroes emphasise with weight, not colour, which is `is-bold`. */
.mea-subpage-hero__headline-emph.is-accent {
  color: var(--mea-accent);
}

.mea-subpage-hero__headline-emph.is-bold {
  font-weight: var(--mea-weight-bold);
}

/* `headline_emph_lh` - the emphasised clause's own leading, where R6 draws it
   a step looser than the plain run in the same block (1.15 against 1.1 on
   /mea-ingestion's 2545:1802). Unset it falls back to `inherit`, which is the
   rule above and leaves every other hero byte-identical. */
.mea-subpage-hero__headline-emph {
  line-height: var(--mea-hero-headline-emph-lh, inherit);
}

/* Figma's body text nodes are fixed-width boxes (538 on /for-carriers, 512 on
   the company heroes, 526 on the content heroes), so the box fills to its cap
   instead of shrink-wrapping the copy. */
.mea-subpage-hero__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  width: 100%;
  max-width: var(--mea-hero-subhead-maxw);
}

.mea-subpage-hero__subhead {
  margin: 0;
  /* A FLOOR, never a fixed height - see render.php's note on subhead_minh.
     Unset it resolves to 0 and the box hugs its copy, which is every hero
     but the three case-study singles. */
  min-height: var(--mea-hero-subhead-minh, 0);
  font-weight: var(--mea-weight-regular);
  font-size: clamp(17px, 1.3889vw, var(--mea-type-p1-size));
  line-height: var(--mea-type-p1-lh);
}

/* Service mark inside the subhead, the same treatment and the same reasoning as
   mea/section-header's `&__body sup` and mea/text-split's `&__right-paragraph
   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, which would fall back to a system font
   mid-sentence. R6 2545:1633 (/products) carries one, "mea Ora℠". `bottom`
   resolves against this element's OWN font-size, so 1.34em is 1.34 x 7px, not
   of the 20px parent. No hero that predates this carries a <sup> - checked
   across all 19 page records - so the rule matches nothing on any of them. */
.mea-subpage-hero__subhead sup {
  font-size: 0.35em;
  vertical-align: baseline;
  position: relative;
  bottom: 1.34em;
}

.mea-subpage-hero__subhead.is-tone-soft {
  color: var(--mea-on-dark-copy);
}

.mea-subpage-hero__subhead.is-tone-full {
  color: var(--mea-on-dark);
}

/* R6 draws two of the four audience heroes' subheads a shade under white:
   #f4f4f3 on /for-reinsurers (2991:11476) and #f8f7f4 on /for-mgas
   (2545:2950). `--mea-on-dark-soft` already carries #f4f4f3 for the FAQ answer
   copy, so this is an exact match on one node and 4/255 on the other's warmer
   variant - the same tolerance product-cards' `__title` note already applies -
   rather than a new token for each. 17.66:1 on --mea-dark. */
.mea-subpage-hero__subhead.is-tone-offwhite {
  color: var(--mea-on-dark-soft);
}

/* A fourth step, for R6's three case-study heroes: rgba(244,244,243,0.9), i.e.
   --mea-on-dark-soft at 90% (3012:10284, 3012:10608, 3012:10877). None of the
   three steps above is within 15/255 of it on --mea-dark - `soft` composites to
   (204,207,206), `offwhite` to (244,244,243) and `full` to white against this
   node's own (220,222,221) - so it is a real ink, not a rounding of one that
   already exists. Same token, one alpha; no new colour. */
.mea-subpage-hero__subhead.is-tone-offwhite-90 {
  color: color-mix(in srgb, var(--mea-on-dark-soft) 90%, transparent);
}

/* The semibold body style, paired in Figma with a 130% line-height. */
.mea-subpage-hero__subhead.is-weight-semibold {
  font-weight: var(--mea-weight-semibold);
  line-height: var(--mea-type-h3-lh);
}

/* The semibold sub-line the team and working-with-mea heroes carry
   (Figma "Hero-Subtext" / "Subheading 2", Inter Semi Bold 20 / 1.3). */
.mea-subpage-hero__note {
  margin: 0;
  font-weight: var(--mea-weight-regular);
  font-size: clamp(17px, 1.3889vw, var(--mea-type-p1-size));
  line-height: var(--mea-type-p1-lh);
}
.mea-subpage-hero__note strong,
.mea-subpage-hero__note b {
  font-weight: var(--mea-weight-semibold);
}

/* `subhead_emphasis: semibold` - 2545:2668 (/mea-full-stack) draws its
   emphasised lead-in clause Inter Semi Bold 600 where a bare <strong> computes
   700, and keeps the paragraph's own 1.6 line height. Mirrors the rule
   __note already carries for its own <strong>; per instance because two other
   heroes carry a <strong> that has not been re-measured. */
.mea-subpage-hero__subhead.is-emphasis-semibold strong,
.mea-subpage-hero__subhead.is-emphasis-semibold b {
  font-weight: var(--mea-weight-semibold);
}

.mea-subpage-hero__note.is-tone-soft {
  color: var(--mea-on-dark-copy);
}

.mea-subpage-hero__note.is-tone-full {
  color: var(--mea-on-dark);
}

/* The note mirrors __subhead's tone axis exactly (see the note above this
   block); no instance uses this step yet, it is here so the two axes cannot
   drift apart. */
.mea-subpage-hero__note.is-tone-offwhite {
  color: var(--mea-on-dark-soft);
}

.mea-subpage-hero__note.is-weight-semibold {
  font-weight: var(--mea-weight-semibold);
  line-height: var(--mea-type-h3-lh);
}

.mea-subpage-hero__cta {
  margin-top: var(--mea-hero-cta-gap);
}

/* Figma sizes the hero pill two ways: the shared 333.44px "Link" component on
   the four audience heroes, and a hug-width pill on /careers (252) and
   /working-with-mea (248). `is-fit-fixed` is the shipped default. */
.mea-subpage-hero__cta.is-fit-hug {
  min-width: 0;
}

/* The two-button hero. R6 draws the pair 30px apart, centre-aligned, on all
   three case-study frames (3045:6914 / 3045:6921 / 3045:6915). The row carries
   the CTA gap so the single-button markup - which every other instance still
   emits - keeps its own margin untouched. */
.mea-subpage-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
  margin-top: var(--mea-hero-cta-gap);
}

.mea-subpage-hero__actions .mea-subpage-hero__cta {
  margin-top: 0;
}

/* The outline pill: a 1px #c5ff00 edge with a lime label and no fill. Two
   classes, because `.mea-cta` is enqueued from _shared/base.css AFTER every
   block stylesheet and wins a (0,1,0) tie - the same cascade trap AGENTS.md
   records for mea/proof's pale pill. `background-image: none` is load-bearing
   for the same reason: `.mea-cta`'s fill is a gradient, so a background-color
   alone leaves the lime gradient painted underneath. */
.mea-subpage-hero .mea-subpage-hero__cta--outline {
  background-color: transparent;
  background-image: none;
  box-shadow: inset 0 0 0 1px var(--mea-accent);
  color: var(--mea-accent);
}

.mea-subpage-hero .mea-subpage-hero__cta--outline:hover,
.mea-subpage-hero .mea-subpage-hero__cta--outline:focus-visible {
  background-color: color-mix(in srgb, var(--mea-accent) 12%, transparent);
  background-image: none;
  color: var(--mea-accent);
}

/* Interpolated: R6 supplies 1440 only. Below the tablet step the two pills
   stack rather than shrink, so neither label wraps mid-word. */
@media (max-width: 767px) {
  .mea-subpage-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
}
/* The optional nested mea/stat-cards row. Figma puts it 32px under the copy on
   /products and /mea-operations and lets it run the full content column. */
.mea-subpage-hero__stats {
  width: 100%;
  margin-top: var(--mea-hero-stats-gap);
}

/* The nested row sits inside the hero's own container, so it must not add a
   second gutter or a second dark ground. */
.mea-subpage-hero__stats > .mea-stat-cards {
  padding-block: 0;
  background: none;
}

.mea-subpage-hero__stats .mea-stat-cards__inner {
  padding-inline: 0;
}

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