/*!****************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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-studies/style.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************/
.mea-case-studies {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  background-color: var(--mea-dark);
  padding: 80px 0;
  --mea-fg: var(--mea-on-dark);
  color: var(--mea-on-dark);
}
@media (max-width: 1023px) {
  .mea-case-studies {
    padding: 64px 0;
  }
}
@media (max-width: 767px) {
  .mea-case-studies {
    padding: 48px 0;
  }
}
.mea-case-studies__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(62, 106, 100, 0.16) 0%, rgba(62, 106, 100, 0) 100%);
  pointer-events: none;
}
.mea-case-studies__inner {
  position: relative;
  z-index: 1;
}
.mea-case-studies__intro {
  margin: 0 0 48px;
  padding: 0;
  border: 0;
  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);
  color: var(--mea-on-dark);
}
@media (max-width: 1023px) {
  .mea-case-studies__intro {
    margin-bottom: 36px;
  }
}
@media (max-width: 767px) {
  .mea-case-studies__intro {
    font-size: clamp(18px, 5vw, 24px);
    margin-bottom: 28px;
  }
}
.mea-case-studies {
  /* All tabs need to stay visible and clickable at every viewport - a
     horizontal-scroll-with-peek pattern hid tabs off-screen unless the
     user scrolled the strip itself, reported live. A CSS grid with equal
     `1fr` columns was tried to also get an exact count per row (one row
     desktop, 3 tablet, 2 mobile) and equal pill widths, but equal width
     fights the label lengths themselves - "Claims" (6 chars) forced to
     the same width as "Underwriting" (12) either left a visibly lopsided
     gap (centred content) or dragged that gap over to one side (left-
     aligned), and even reasonable padding/gap trims couldn't make 5
     equal columns fit "Underwriting" without also shrinking type, since
     `.mea-container` never exceeds 1264px of content regardless of
     viewport. Reported live as not looking good, so equal width is
     dropped: pills hug their own label again (Figma's own sizing), and
     `flex-wrap` wraps whatever doesn't fit onto additional rows based on
     actual content width rather than a fixed count - every tab stays
     visible with no scrolling, which was the actual requirement; an
     exact N-per-row count was a means to that end, not the goal itself. */
}
.mea-case-studies__tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 55px;
  margin-bottom: 73px;
}
@media (max-width: 1023px) {
  .mea-case-studies__tabs {
    gap: 24px;
    margin-bottom: 48px;
  }
}
@media (max-width: 767px) {
  .mea-case-studies__tabs {
    row-gap: 16px;
    column-gap: 12px;
    margin-bottom: 32px;
  }
}
.mea-case-studies__tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  gap: 19px;
  padding: 18px 25px;
  border: 0;
  border-radius: var(--mea-pill-radius);
  background: transparent;
  font: inherit;
  color: inherit;
  appearance: none;
  cursor: pointer;
}
@media (max-width: 767px) {
  .mea-case-studies__tab {
    gap: 12px;
    padding: 12px 18px;
  }
}
.mea-case-studies__tab:focus-visible {
  outline: 2px solid var(--mea-accent-border);
  outline-offset: 3px;
}
.mea-case-studies__tab {
  /* Opt-in hand-sized pill (see render.php), pinned to the ONE width
     Figma specifies. The five R6 widths total 1041 and need 1261 with
     their 55px gaps, which fits the 1264 content column at 1440 and
     nothing narrower: measured, applying them at every width wrapped the
     strip onto two rows at 1024, 1200 AND 1366, where the hugging strip
     (887 + gaps = 1107) wraps only at 1024. Same shape as the 1024-1346
     gap AGENTS.md records for mea/bridge-band, and the same answer as
     stat-cards' `cardWidthsFloor` and subpage-hero's crop floor: hold the
     design's numbers where the design applies and let it hug below.
     Unset -> hug, which is what every other instance of this block does. */
}
@media (min-width: 1440px) {
  .mea-case-studies__tab {
    width: var(--mea-cs-tab-w, auto);
    flex: 0 0 auto;
  }
}
.mea-case-studies {
  /* Deck slide 03: "Active tab highlight slides horizontally to selected
     tab, 400ms, cubic-bezier(0.4, 0, 0.2, 1) (Apple-style pill slider)" -
     one shared element that view.js sizes/positions to the active tab's
     own rect, rather than each button toggling its own fill. Inset shadow,
     not a border: Figma draws the active selector's stroke inside its 55px
     box (node 2001:4337), and a 1px border added 2px to a pill whose
     height comes from its own content. */
}
.mea-case-studies__tab-pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px var(--mea-accent-border);
  background: var(--mea-tab-active-bg);
  border-radius: var(--mea-pill-radius);
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1), height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .mea-case-studies__tab-pill {
    transition: none;
  }
}
.mea-case-studies__tab-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--mea-dot-inactive);
  filter: blur(1.5px);
  transition: background-color 0.2s ease;
}
@media (max-width: 767px) {
  .mea-case-studies__tab-dot {
    width: 14px;
    height: 14px;
    filter: blur(1.1px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mea-case-studies__tab-dot {
    transition: none;
  }
}
.mea-case-studies__tab--active .mea-case-studies__tab-dot {
  background: var(--mea-accent);
}
.mea-case-studies__tab-label {
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-bold);
  font-size: 18px;
  line-height: 17.34px;
  letter-spacing: 0.87px;
  color: var(--mea-on-dark-dim);
  white-space: nowrap;
  transition: color 0.2s ease;
}
@media (max-width: 767px) {
  .mea-case-studies__tab-label {
    font-size: 15px;
    line-height: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mea-case-studies__tab-label {
    transition: none;
  }
}
.mea-case-studies__tab--active .mea-case-studies__tab-label {
  color: var(--mea-on-dark);
}
.mea-case-studies__panels {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
}
.mea-case-studies {
  /* Deck slide 03: "Content area - Crossfade between tab content, 300ms.
     Outgoing fades to 0, incoming fades from 0 with 4px upward shift."
     DERIVED: the deck states the incoming shift but not the outgoing one;
     a single symmetric transition gives the outgoing panel the same 4px
     drop on its way out, which is the simplest reading that still matches
     the stated incoming motion exactly. */
}
.mea-case-studies__content {
  grid-area: 1/1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .mea-case-studies__content {
    transition: none;
  }
}
.mea-case-studies__content.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mea-case-studies__content {
  display: flex;
  align-items: center;
  gap: clamp(32px, 9.1667vw, 132px);
  /*
   * `align-self: start` is load-bearing at EVERY width (Lia, 2026-09-10).
   *
   * All five panels share one grid cell on `&__panels`
   * (`grid-area: 1 / 1`), which is what stops the section resizing as
   * you switch tabs - but it also makes the cell as tall as the TALLEST
   * tab and stretches every panel to it. The active panel then has to
   * put that surplus somewhere, and `align-items: center` above splits
   * it above and below the content:
   *
   *   - In the row direction it opened a gap under the tab strip.
   *     Measured at 1086 on `/`: the Operations card is 615 tall in a
   *     783 panel (the Underwriting tab's card is 769), so the headline
   *     sat 231px below the pills and the card 157px below them, where
   *     the designed step is the 73px `&__tabs` margin plus centring
   *     against the ACTIVE card. Worst across 1024-1200, because the
   *     hand-sized pill strip wraps to three rows there and the tabs
   *     differ most in height.
   *   - In the column direction (<= 1023) the same surplus was split
   *     between `&__text` and `&__card`, half of it landing as dead
   *     space between the CTA and the "How you win" box.
   *
   * Taking the panel's natural height fixes both from one place: the
   * surplus falls past the end of the panel instead, `align-items:
   * center` goes back to centring the text against the card that is
   * actually on screen, and the section is no shorter for it - the grid
   * row is still sized by the tallest tab, so tab switching still does
   * not jump.
   */
  align-self: start;
  /*
   * tablet/mobile: single column, text above, feature box below.
   *
   * `align-self: start` on the base rule is what holds this gap at 48px
   * (reported as a big gap between "Talk to a mea expert" and the "How
   * you win" box); before it, the tallest tab's surplus was split
   * between `&__text` and `&__card` and half landed under the CTA -
   * 167/116/80/64/73 at 320/390/767/900/1023 against the 48 declared
   * here. `&__text` and `&__card` are pinned to `flex: 0 0 auto` below
   * as well, which is the same fix from the other end: it keeps anything
   * that stretches this panel from re-opening the gap, and it drops the
   * matching surplus out of the card's own glass box.
   */
}
@media (max-width: 1023px) {
  .mea-case-studies__content {
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
  }
}
.mea-case-studies__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
  flex: 0 1 500px;
  min-width: min(380px, 100%);
}
@media (max-width: 1023px) {
  .mea-case-studies__text {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    gap: 28px;
  }
}
.mea-case-studies__eyebrow {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--mea-font-mono);
  font-weight: var(--mea-weight-light);
  font-size: var(--mea-type-eyebrow-size);
  line-height: 1;
  letter-spacing: var(--mea-type-eyebrow-ls);
  color: var(--mea-eyebrow-on-dark);
}
.mea-case-studies__headline {
  margin: 0;
  padding: 0;
  border: 0;
  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);
  color: var(--mea-on-dark);
}
.mea-case-studies__body {
  margin: 0;
  padding: 0;
  border: 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);
  color: var(--mea-on-dark);
}
.mea-case-studies__cta.mea-cta {
  margin: 0;
}
.mea-case-studies__card {
  position: relative;
  box-sizing: border-box;
  flex: 0 1 774px;
  min-width: 0;
  min-height: 615px;
  margin-block: 7px;
  padding: clamp(32px, 4.7222vw, 68px) clamp(24px, 4.4444vw, 64px);
  border-radius: var(--mea-glass-radius);
  background: var(--mea-glass);
  /* Figma's GLASS effect, same construction as check-list's
     `&--badge-panel &__panel` (AGENTS.md's dedicated GLASS section):
     the hairline is an overlay, never a `border` - a real border costs
     2px of layout height. `get_design_context` reports only the flat
     5% fill for this node with no stroke at all, which is expected -
     AGENTS.md already documents that GLASS is invisible to that tool
     and has to be pixel-sampled off the rendered screenshot instead.
     Sampled directly on THIS node (2545:1513, R4 EXPORT, 1440 render):
     top (121,143,140) and left (131,158,155) against a ~5%-fill
     interior of (22-31,44-58,41-55) solve to alpha 0.43-0.51 across
     channels (average ~46%); bottom (85,104,101) against interior
     (25,44,42) solves to 0.26-0.28 (average ~27%). Both edges also
     read slightly cyan-tinted rather than pure white (R consistently
     the lowest channel), same as every other measured instance of
     this effect in the project - not chased here either, per the
     standing "do not invent a tint the design does not declare" rule.
     Right edge sits off-canvas in the available 1440 render (the box
     bleeds past the frame there), so it is set equal to the measured
     bottom value on the standing top-left-lit/bottom-right-shaded
     convention rather than left unmeasured. NOT check-list's 37/26 -
     AGENTS.md is explicit that GLASS depth is per-node and those
     values are not interchangeable. The other half of GLASS (a
     refraction bevel darkening/lightening the fill near the edges)
     has no CSS equivalent and is deliberately not faked, same as
     everywhere else this effect appears. */
}
.mea-case-studies__card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid;
  border-color: color-mix(in srgb, var(--mea-on-dark) 46%, transparent) color-mix(in srgb, var(--mea-on-dark) 27%, transparent) color-mix(in srgb, var(--mea-on-dark) 27%, transparent) color-mix(in srgb, var(--mea-on-dark) 46%, transparent);
  border-radius: inherit;
}
@media (max-width: 1023px) {
  .mea-case-studies__card {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    margin-block: 0;
    padding: 48px 40px;
  }
}
@media (max-width: 767px) {
  .mea-case-studies__card {
    padding: 28px 24px;
    border-radius: 24px;
  }
}
.mea-case-studies__card-heading {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-bottom: 50px;
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-bold);
  font-size: 30px;
  line-height: 36.1px;
  letter-spacing: 1.8px;
  color: var(--mea-on-dark);
}
.mea-case-studies__card-heading span:last-child {
  color: var(--mea-on-dark);
  font-weight: var(--mea-weight-bold);
}
@media (max-width: 767px) {
  .mea-case-studies__card-heading {
    gap: 16px;
    margin-bottom: 28px;
    font-size: clamp(22px, 6vw, 26px);
    line-height: 1.2;
    letter-spacing: 1.2px;
  }
}
.mea-case-studies__card-dot {
  display: inline-block;
  width: 37.6px;
  height: 37.6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--mea-accent);
  filter: blur(2.8px);
}
@media (max-width: 767px) {
  .mea-case-studies__card-dot {
    width: 26px;
    height: 26px;
    filter: blur(2px);
  }
}
.mea-case-studies__card-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (max-width: 767px) {
  .mea-case-studies__card-list {
    gap: 20px;
  }
}
.mea-case-studies {
  /* Deck slide 03: "Bullet items within content - Staggered fade-up, 100ms
     delay between items, 400ms each." view.js sets each item's
     transition-delay to its index * 100ms when its panel activates; the
     resting/active pair here only needs the shared duration and motion. */
}
.mea-case-studies__card-item {
  display: flex;
  align-items: center;
  gap: 26px;
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-regular);
  font-size: var(--mea-type-p1-size);
  line-height: 45.13px;
  color: var(--mea-on-dark);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .mea-case-studies__card-item {
    transition: none;
  }
}
.mea-case-studies__card-item span:last-child {
  color: var(--mea-on-dark);
  font-weight: var(--mea-weight-regular);
}
@media (max-width: 767px) {
  .mea-case-studies__card-item {
    align-items: flex-start;
    gap: 16px;
    font-size: 16px;
    line-height: 1.45;
  }
}
.mea-case-studies__content.is-active .mea-case-studies__card-item {
  opacity: 1;
  transform: translateY(0);
}
@media (min-width: 1440px) {
  .mea-case-studies__content {
    gap: 132px;
  }
  .mea-case-studies__text {
    flex: 0 0 500px;
    width: 500px;
  }
  .mea-case-studies__card {
    flex: 0 0 774px;
    width: 774px;
    padding: 68px 64px;
  }
}
.mea-case-studies {
  /*
   * 1024-1439px: a first attempt reused the >=1440px fixed 500/774/132
   * geometry down to 1024px, which does keep the box bleeding toward the
   * edge, but a FIXED 774px card can genuinely outgrow the space left
   * after a FIXED 500px text column well before the viewport reaches
   * 1440 - and since the row was flagged not to shrink, the overflow
   * silently clipped real checklist text, not just decorative padding -
   * reported live.
   *
   * `.mea-container` is `max-width: 1440px` with `padding-inline:
   * var(--mea-gutter)` (border-box) - for any viewport <= 1440 (this
   * whole range), the container's own OUTER edge already sits flush with
   * the true viewport edge. So instead of forcing a fixed width, `&__card`
   * keeps its normal shrinkable `flex: 0 1 774px` basis (never smaller
   * than the row actually needs, text stays fully visible) and is pulled
   * outward by exactly one gutter's width - landing its right edge on
   * that real edge at every width in this range, not just at 1440.
   */
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .mea-case-studies__card {
    margin-right: calc(-1 * var(--mea-gutter));
  }
}
.mea-case-studies__card-check {
  display: inline-flex;
  box-sizing: border-box;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 41.37px;
  height: 41.37px;
  border-radius: var(--mea-tile-radius);
  background: var(--mea-glass-strong);
  box-shadow: inset 0 0 0 1.88px var(--mea-check-ring);
}
.mea-case-studies__card-check img,
.mea-case-studies__card-check svg {
  display: block;
  width: 22.56px;
  height: 22.56px;
}
@media (max-width: 767px) {
  .mea-case-studies__card-check {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
  .mea-case-studies__card-check img,
  .mea-case-studies__card-check svg {
    width: 18px;
    height: 18px;
  }
}

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