/*!*******************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/case-study-feed/style.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************/
/**
 * mea/case-study-feed
 *
 * Two containers over one card model, measured from the /case-studies frame
 * (file 9SWHsksPbiz0sj8IF30o5u, node 2008:7296):
 *
 *   grid      2008:7347 / 2008:7349  section 1440x1332, 2-up wrapped grid
 *   featured  2008:7324              section 1440x750, split 464 / 736 card
 *
 * The dark testimonial band on the same page (2008:7406) is mea/proof's
 * `layout=split`, not this block's: that shape recurs on five nodes and has one
 * owner.
 *
 * Colour and type resolve through tokens.css. The only literals here are the
 * featured plate's two wash colours, each commented with its node.
 *
 * Every multi-column box here uses `minmax(0, Nfr)` grid tracks rather than a
 * rigid `flex: 0 0 Npx`, so nothing has an intermediate width at which it can
 * overflow between the mobile breakpoint and the design width.
 */
.mea-case-study-feed {
  box-sizing: border-box;
  /* Subpage frames use a 120px section gutter against the homepage's 88px,
     so rebind the shared gutter rather than bypass .mea-container.
     120 / 1440 = 8.3333vw. */
  --mea-gutter: clamp(20px, 8.3333vw, 120px);
}
.mea-case-study-feed * {
  box-sizing: border-box;
}
.mea-case-study-feed {
  /* --------------------------------------------------------------- *
   * Section grounds
   * --------------------------------------------------------------- */
}
.mea-case-study-feed--panel-light {
  padding-top: var(--mea-csf-pt, 100px);
  padding-bottom: var(--mea-csf-pb, 100px);
  background-color: var(--mea-surface);
  color: var(--mea-ink);
}
.mea-case-study-feed--panel-dark {
  --mea-fg: var(--mea-on-dark);
  padding-top: var(--mea-csf-pt, 0);
  padding-bottom: var(--mea-csf-pb, 0);
  background-color: var(--mea-dark);
  color: var(--mea-on-dark);
  /* 2008:7406 declares `linear-gradient(180deg, transparent 28.55%,
     rgba(62,106,100,0.2) 82.628%)` - byte-identical to the wash on
     card-grid and insights-featured, and it renders non-linearly in
     Figma for the same reason: Figma interpolates the transparent stop
     without premultiplying where CSS gradients premultiply. The fitted
     curve is alpha = max * f^2.5, written out as stops across the
     28.55% -> 82.628% span (quarter points 42.07 / 55.59 / 69.11). */
  background-image: linear-gradient(180deg, transparent 28.55%, color-mix(in srgb, var(--mea-glow-teal) calc(var(--mea-csf-glow, 20%) * 0.031), transparent) 42.07%, color-mix(in srgb, var(--mea-glow-teal) calc(var(--mea-csf-glow, 20%) * 0.177), transparent) 55.59%, color-mix(in srgb, var(--mea-glow-teal) calc(var(--mea-csf-glow, 20%) * 0.487), transparent) 69.11%, color-mix(in srgb, var(--mea-glow-teal) var(--mea-csf-glow, 20%), transparent) 82.628%);
}
.mea-case-study-feed__inner {
  display: flex;
  flex-direction: column;
}
.mea-case-study-feed__empty {
  margin: 0;
  font-family: var(--mea-font-sans);
  font-size: var(--mea-type-p1-size);
  line-height: var(--mea-type-p1-lh);
}
.mea-case-study-feed {
  /* --------------------------------------------------------------- *
   * grid - 2008:7347
   * Section 66 top / 100 bottom, 48 between the header and the grid.
   * --------------------------------------------------------------- */
}
.mea-case-study-feed--grid .mea-case-study-feed__inner {
  gap: 48px;
}
.mea-case-study-feed__grid {
  display: grid;
  grid-template-columns: repeat(var(--mea-csf-cols, 2), minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mea-case-study-feed__item {
  display: flex;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------------------- *
 * The grid card - 2008:7350
 * 588 x 522 with a 1px hairline and a 16px radius. The height is a MINIMUM,
 * not a fixed frame: Figma's fourth card already stores 522 while its own
 * body lays out 558, and a real record with a longer summary would print
 * through the "Read more" row if the card were pinned.
 * ------------------------------------------------------------------------- */
.mea-case-study-card {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 522px;
  overflow: hidden;
  /* The card edge is an INSET SHADOW, not a border, per the standing rule in
     AGENTS.md: a real 1px border on a content-height box adds 2px to the box
     and takes 2px off everything inside it. Measured here before the swap -
     the featured card ran 502 tall against R6's 500, its media column 487.03
     against 489, and its badge sat 33px in from a 32px inset; the grid card
     ran 535.48 against its own content's 534. Figma draws these strokes
     INSIDE the frame, so a shadow is also the faithful reproduction. */
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--mea-rule-light);
}
.mea-case-study-card__media {
  position: relative;
  flex: 0 0 auto;
  /* 588 x 260 on the node. An aspect ratio rather than a fixed height so
     the plate keeps the design's crop at every column width. */
  aspect-ratio: 588/260;
  overflow: hidden;
  background-color: var(--mea-media-placeholder);
}
.mea-case-study-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mea-case-study-card {
  /* 2008:7353: 12px radius, 4/12 padding, Fira Code Semi Bold 11 in lime on
     the dark ground. Rendered verbatim - the node's own textCase is
     ORIGINAL, so "MGA" and "Reinsurer" differ in the design on purpose. */
}
.mea-case-study-card__segment {
  position: absolute;
  top: 24px;
  left: 24px;
  padding: 4px 12px;
  border-radius: 12px;
  background-color: var(--mea-dark);
  color: var(--mea-accent);
  font-family: var(--mea-font-mono);
  font-weight: var(--mea-weight-semibold);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0;
}
.mea-case-study-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
}
.mea-case-study-card__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mea-case-study-card {
  /* Figma "Eyebrow Line" in the secondary ink (2008:7357). `normal` rather
     than the token's 100%: every eyebrow node in this file reports
     leading-[normal], same as mea/section-header records. */
}
.mea-case-study-card__client {
  margin: 0;
  color: var(--mea-ink-2);
  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);
}
.mea-case-study-card {
  /* Figma "H3" (2008:7358). */
}
.mea-case-study-card__tagline {
  margin: 0;
  color: var(--mea-ink-display);
  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);
  letter-spacing: 0;
}
.mea-case-study-card {
  /* One link per card. The stretched pseudo-element makes the whole card the
     hit area, which is why the "Read more" row below is aria-hidden rather
     than a second anchor to the same record. */
}
.mea-case-study-card__link {
  color: inherit;
  text-decoration: none;
}
.mea-case-study-card__link::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
}
.mea-case-study-card__link:hover, .mea-case-study-card__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mea-case-study-card {
  /* Figma "P2" (2008:7359). */
}
.mea-case-study-card__summary {
  margin: 0;
  color: var(--mea-ink-2);
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-regular);
  font-size: var(--mea-type-p2-size);
  line-height: var(--mea-type-p2-lh);
}
.mea-case-study-card {
  /* Figma "H4" plus the 16px arrow (2008:7360). */
}
.mea-case-study-card__more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--mea-ink-display);
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-semibold);
  font-size: var(--mea-type-h4-size);
  line-height: var(--mea-type-h4-lh);
}
.mea-case-study-card__more-label {
  font-weight: var(--mea-weight-semibold);
}
.mea-case-study-card__more-arrow {
  display: block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}
.mea-case-study-card:hover .mea-case-study-card__more-arrow {
  transform: translateX(4px);
}

/* ------------------------------------------------------------------------- *
 * featured - 2008:7324
 * ------------------------------------------------------------------------- */
.mea-case-study-feed--featured .mea-case-study-feed__inner {
  gap: 24px;
}
.mea-case-study-feed--featured {
  /* 2008:7326 is Figma "H4" - Inter Semi Bold 20 - NOT the mono eyebrow, so
     it is this block's own label rather than a nested section-header row. */
}
.mea-case-study-feed--featured .mea-case-study-feed__label {
  margin: 0;
  color: var(--mea-ink-display);
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-semibold);
  font-size: var(--mea-type-h4-size);
  line-height: var(--mea-type-h4-lh);
}

.mea-case-study-featured {
  display: grid;
  /* R6 2545:3397 splits the 1200 column 489 / 711, not the 464 / 736 the R4
     node 2008:7327 drew. It is not a ratio: the copy column 2545:3409 is
     `shrink-0` at 48 + 615 + 48 = 711 and the media 2545:3398 is
     `flex-[1_0_0]`, i.e. the copy is pinned and the picture takes whatever
     is left. Reproduced as a fixed second track rather than two fr units so
     the copy measure holds at any container width, which is what keeps the
     615px title box and the 526px summary box on their own wrap points.
     Measured on the node's own render (run-length scan at y=400): card edges
     at x 120 and 1319, media/copy boundary at 608|609.

     Expressed as a RATIO, not as a rigid `minmax(0, 1fr) 711px` track. The
     rigid form reproduces the design exactly at 1440 and collapses the
     photograph everywhere below it: the copy column cannot shrink, so at 1024
     the media measured 142.3px against its 489 (1100 -> 205.7, 1200 -> 289,
     1300 -> 372.3). That is the same silent 1024-to-1439 band this repo
     already records for mea/bridge-band's fixed-gap row and mea/stat-cards'
     cardWidths - a real defect on a common laptop width, not a display
     artifact. Because .mea-container caps at 1200, the two forms are
     identical from 1440 up, so the ratio costs nothing at the design width
     and degrades proportionally below it. */
  grid-template-columns: minmax(0, 489fr) minmax(0, 711fr);
  min-height: 500px;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px var(--mea-rule-light);
}
.mea-case-study-featured__media {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  background-color: var(--mea-dark);
}
.mea-case-study-featured__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mea-case-study-featured {
  /* Two overlay layers off 2008:7328 / 2008:7329, in Figma's own order:
     a flat #0d322d at 20% over the photograph, then a vertical ramp of
     #021412 from 10.2% at the top to 69.8% at the bottom. Both stops of the
     ramp share one RGB, so premultiplication cannot shift it and the two
     stops need no expansion. Neither colour has a token - they are this
     node's own plate treatment. */
}
.mea-case-study-featured__wash {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(2, 20, 18, 0.102) 0%, rgba(2, 20, 18, 0.698) 100%), linear-gradient(0deg, rgba(13, 50, 45, 0.2) 0%, rgba(13, 50, 45, 0.2) 100%);
}
.mea-case-study-featured {
  /* 2008:7330 centres the client mark at 263 x 171. */
}
.mea-case-study-featured__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(263px, 60%);
  max-height: 34%;
  object-fit: contain;
  transform: translate(-50%, -50%);
}
.mea-case-study-featured {
  /* 2008:7337: 4px radius, 0.5px lime hairline, white at 10%, lime label.
     The node's fill is white at 10% and NOTHING else, which reads only
     because the plate under it in Figma happens to be a dark photograph.
     The plate here is whatever photograph the record carries: measured on a
     bright thumbnail, the lime label came out at 1.96:1. So the white film
     is composited over a dark base of its own rather than over the photo -
     the same answer the sibling badge on 2008:7353 already gives, with the
     hairline and the label unchanged. Re-measured at 6.4:1.

     The hairline is an inset shadow, not a border, for the reason AGENTS.md
     records for every content-height box in this repo: a real border adds its
     own height. Figma's 0.5px stroke rasterises to 1px each side and put the
     chip at 30 against R6's own 28 (2545:3407, measured off the node render -
     the lime edge occupies rows 182 and 209 and columns 152 and 281, so the
     box is 130 x 28 at a 32/32 inset). As a shadow it paints the same
     hairline and the chip is 6 + 16 + 6 = 28 exactly. */
}
.mea-case-study-featured__badge {
  position: absolute;
  top: 32px;
  left: 32px;
  padding: 6px 16px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--mea-accent);
  background-color: rgba(2, 20, 18, 0.72);
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
  color: var(--mea-accent);
  font-family: var(--mea-font-mono);
  font-weight: var(--mea-weight-medium);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.mea-case-study-featured__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding: 48px;
}
.mea-case-study-featured {
  /* Figma "H1 - Section" (2008:7341), clamped down below the design width
     the same way mea/section-header clamps its headline. */
}
.mea-case-study-featured__title {
  max-width: 615px;
  margin: 0;
  color: var(--mea-ink-display);
  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);
  letter-spacing: 0;
}
.mea-case-study-featured__link {
  color: inherit;
  text-decoration: none;
}
.mea-case-study-featured__link:hover, .mea-case-study-featured__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mea-case-study-featured {
  /* 2008:7342. Figma's 34px left padding is measured from the frame edge and
     its 4px stroke is INSIDE, so the border takes 4 of it and 30 is left. */
}
.mea-case-study-featured__quote {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 16px 24px 16px 30px;
  border-left: 4px solid var(--mea-accent);
  border-radius: 0 16px 16px 0;
  background-color: var(--mea-surface-alt);
}
.mea-case-study-featured__quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}
.mea-case-study-featured__quote p {
  margin: 0;
  color: var(--mea-ink-display);
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-regular);
  font-size: var(--mea-type-p2-size);
  line-height: var(--mea-type-p2-lh);
}
.mea-case-study-featured__quote figcaption {
  color: var(--mea-ink-2);
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-regular);
  font-size: var(--mea-type-p2-size);
  line-height: var(--mea-type-p2-lh);
}
.mea-case-study-featured {
  /* R6 3034:6068 is the named "P1" step - Inter Regular 20 / 1.6 - in a 526px
     box, painted #021412 at 80% opacity. The block drew it at P2 (16 / 1.5)
     in --mea-ink-2 with no measure, which is the R4 node's treatment.
     The ink is `opacity` rather than a pre-mixed colour because that is what
     the node declares (`opacity-80` on the text node itself), and
     --mea-ink-strong IS #021412, so this stays on the token layer.
     The 526px measure is load-bearing: it is what breaks the line before
     "clearance" the way the design does - the 615px title box would fit it. */
}
.mea-case-study-featured__summary {
  max-width: 526px;
  margin: 0;
  opacity: 0.8;
  color: var(--mea-ink-strong);
  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-case-study-featured {
  /* The shared CTA component, with this instance's own fill: 2008:7346
     overrides the Link's gradient to the soft lime pill. Geometry, type and
     ink all still come from .mea-cta.

     The compound selector is deliberate. `.mea-cta` lives in the shared
     base.css layer, which mea-blocks.php enqueues as plain CSS AFTER the
     block stylesheets, so a single-class rule here ties on specificity and
     loses on source order - measured: the pill rendered the full gradient. */
}
.mea-case-study-featured .mea-case-study-featured__cta {
  align-self: flex-start;
  background: var(--mea-pill-bg);
}
.mea-case-study-featured .mea-case-study-featured__cta:hover {
  background: var(--mea-pill-bg);
  filter: brightness(0.96);
}

/* ------------------------------------------------------------------------- *
 * Tablet and mobile. Figma supplies the 1440 frame only, so both steps are
 * interpolated from it: the two-column boxes collapse, the flush-right panel
 * becomes a full-width band, and the section insets tighten.
 * ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .mea-case-study-feed--panel-light {
    padding-top: min(var(--mea-csf-pt, 100px), 80px);
    padding-bottom: min(var(--mea-csf-pb, 100px), 80px);
  }
  .mea-case-study-feed--grid .mea-case-study-feed__inner {
    gap: 36px;
  }
  .mea-case-study-feed__grid {
    grid-template-columns: repeat(var(--mea-csf-cols-md, 2), minmax(0, 1fr));
  }
  .mea-case-study-featured {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .mea-case-study-featured__media {
    min-height: 0;
    aspect-ratio: 16/9;
  }
  .mea-case-study-featured__copy {
    gap: 24px;
    padding: 32px;
  }
}
@media (max-width: 767px) {
  .mea-case-study-feed--panel-light {
    padding-top: min(var(--mea-csf-pt, 100px), 56px);
    padding-bottom: min(var(--mea-csf-pb, 100px), 56px);
  }
  .mea-case-study-feed--grid .mea-case-study-feed__inner {
    gap: 28px;
  }
  .mea-case-study-feed__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .mea-case-study-card {
    min-height: 0;
  }
  .mea-case-study-card__body {
    padding: 24px;
  }
  .mea-case-study-card__client {
    font-size: 16px;
    letter-spacing: 1.2px;
  }
  .mea-case-study-card__more {
    font-size: 18px;
  }
  .mea-case-study-featured__copy {
    padding: 24px;
  }
  .mea-case-study-featured__quote {
    padding: 16px 16px 16px 22px;
  }
}
/* CONTRIBUTING's accessibility rule: every animation respects the setting. The
   shared base.css block covers `.mea-cta`, and neither of the transitions above
   is that component. */
@media (prefers-reduced-motion: reduce) {
  .mea-case-study-card__more-arrow {
    transition: none;
  }
  .mea-case-study-card:hover .mea-case-study-card__more-arrow {
    transform: none;
  }
}

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