/*!*************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/team-grid/style.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************/
/**
 * mea/team-grid - Figma "19. team-and-advisory-board", node 2008-7963.
 *
 * Four instances of one shape, measured from their own frames:
 *   2008:8008  Leadership        2 cards, top hairline
 *   2008:8045  Advisory board    5 cards, top hairline
 *   2008:8077  Market Leaders    2 cards drawn (3 live), no hairline
 *   2008:8099  Business Leaders  6 cards drawn (10 live), no hairline
 * The card (2008:8014 hover / 2008:8023 resting) is 384x454 with a 352x352
 * portrait in all of them, and every grid is the same three-column 1200px
 * track set - what the audit read as "2-up vs 3-up" is the item count, not a
 * different grid. Section insets and the header-to-grid gap disagree per
 * instance, so they arrive from render.php as custom properties.
 *
 * The bio dialog is the "POP UP STATE" frame (2008:8032).
 *
 * Colour and type resolve through src/_shared/tokens.css. Only geometry
 * specific to these frames (radii, section insets, dialog measurements) is
 * written literally, each tagged with the node it came from.
 */
.mea-team-grid {
  /* Section gutter is 120px on the subpage frames against the homepage's
     88px. Rebinding the variable keeps the shared .mea-container utility
     and just moves its inset: 120 / 1440 = 8.3333vw, so the content column
     settles at 1200px from 1440 up. */
  --mea-gutter: clamp(20px, 8.3333vw, 120px);
  /* Card radius 16 (2008:8023), portrait radius 8 (2008:8024). */
  --mea-team-card-radius: 16px;
  --mea-team-photo-radius: 8px;
  position: relative;
  box-sizing: border-box;
  padding-top: var(--mea-team-pt, 80px);
  padding-bottom: var(--mea-team-pb, 100px);
  background-color: var(--mea-surface);
  font-family: var(--mea-font-sans);
}

/* Figma opens 2008:8008 and 2008:8045 with a #e6e6e2 hairline and gives
   2008:8076 none. Drawn as an inset shadow, not a border: these sections are
   full-bleed and stack directly, and a 1px border adds its own height. */
.mea-team-grid--rule-top {
  box-shadow: inset 0 1px 0 var(--mea-rule-light);
}

.mea-team-grid__inner {
  display: flex;
  flex-direction: column;
  gap: var(--mea-team-header-gap, 48px);
}

/* ---------------------------------------------------------------- *
 * Nested mea/section-header instance overrides
 *
 * Three values this frame's headers disagree with the shared block on.
 * Scoped to this block so no other section moves.
 * ---------------------------------------------------------------- */
/* 2008:8009 / 2008:8046 / 2008:8077 / 2008:8099 all space the three rows at
   a uniform 24px. The shared block's "roomy" step is 24px plus a 12px extra
   before the body (measured from 2008:7316, which does open that gap), so
   the extra is removed here rather than by adding a fifth gap step to a
   block four other sections already depend on. */
.mea-team-grid .mea-section-header--spacing-roomy .mea-section-header__body {
  margin-top: 0;
}

/* The eyebrow and the headline are #1c1c1a on these frames (2008:8010 /
   2008:8011), one step darker than the light tone's shared #2e2e2b, which
   was measured from the case-studies header. The body line and the card role
   line do paint #2e2e2b, so --mea-fg keeps its default. */
.mea-team-grid .mea-section-header--light .mea-section-header__eyebrow,
.mea-team-grid .mea-section-header--light .mea-section-header__headline {
  color: var(--mea-ink-display);
}

/* ---------------------------------------------------------------- *
 * Grid (2008:8013 / 2008:8050 / 2008:8081)
 *
 * Three equal tracks in the 1200px column give exactly 384px per card with
 * 24px gutters, and the tracks are sized from the column rather than from
 * the items - so a two-person group keeps 384px cards and leaves the third
 * track empty, which is what Figma draws.
 * ---------------------------------------------------------------- */
.mea-team-grid__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mea-team-grid__item {
  display: flex;
  margin: 0;
}

/* ---------------------------------------------------------------- *
 * Card (2008:8023 resting, 2008:8014 hover)
 * ---------------------------------------------------------------- */
.mea-team-grid__card {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  padding: 16px;
  background-color: var(--mea-surface-alt);
  border-radius: var(--mea-team-card-radius);
  /* The hover card gains a 1px #96e137 stroke. Drawn as an inset shadow
     for the same reason as the section hairline: Figma's stroke is inside
     the frame and costs no layout, a CSS border would make the card 456
     instead of 454. */
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow 0.25s ease;
}

/* No `overflow: hidden` here: the cut-out's hover glow bleeds past this
   box's own edges (per the Figma HOVER STATE reference), and a clipped
   ancestor clips a descendant's filter/shadow along with it. Corner
   rounding moves onto each image instead. */
.mea-team-grid__photo-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background-color: var(--mea-media-placeholder);
  border-radius: var(--mea-team-photo-radius);
}

/* Absolutely positioned and inset, not `width/height: 100%` in normal flow:
   without the wrapper's `overflow: hidden` (removed above so the cut-out's
   glow can bleed past it), a percentage height on a normal-flow child of an
   aspect-ratio box does not reliably resolve in every case, and this element
   fell back to some members' own (non-square) source headshot ratio instead
   of the fixed 352x352 square - Elliott Bundy measured 352x370 and Chetan
   Nibjiya 352x398, stretching their whole card and the rest of their grid
   row with them. `inset: 0` pins directly to the positioned wrapper's box
   regardless of the image's own intrinsic ratio, the same technique
   `.mea-team-grid__cutout` already used. */
.mea-team-grid__photo {
  position: absolute;
  inset: 0;
  display: block;
  /* `inset: 0` alone does not stretch a replaced element (img) the way it
     does a plain block box - a replaced element's `auto` size falls back
     to its own intrinsic dimensions instead, which is what actually caused
     the bug this rule now fixes. Explicit 100%/100% is still required
     alongside the positioning. */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--mea-team-photo-radius);
  /* Every portrait on this frame is black and white at rest. The migrated
     headshots already are (measured mean HSL saturation 0 to 0.015), so
     this changes no pixel today and holds the treatment if a colour
     headshot is uploaded later. */
  filter: grayscale(1);
}

/* THE RESTING PORTRAIT. R6 stands the background-removed cut-out on the grey
   plate - the plate is the ground the alpha shows through, which is why
   `__photo-wrap` carries the fill and this image carries none. Measured
   against R6's own card rectangles per portrait box (24/255 tolerance):
   McGavick 2545:3792 0.01%, Cusano 2545:3819 0.02%, Griffin 2545:3824 0.01%,
   James 2545:3834 0.01% - i.e. exact. `render.php` therefore renders EITHER
   this or `__photo`, never both: painting the square headshot underneath
   showed it through the cut-out's transparent background and lost the plate,
   which is what the page drew until 2026-09-05 (55.99% of the portrait box
   differing against R6, the largest single delta on the page).

   Changed 2026-09-05 on the R6 team pass, captain call `team-resting-portrait`
   (option 2), under the standing "fallback to being faithful to the design"
   rule and the wave 2 ruling that the Figma photographs are final. Before it,
   the cut-out was an `opacity: 0` overlay revealed only on hover. The GLOW is
   still the hover treatment and still traces the person's alpha rather than
   the image box, which is what R6's own "HOVER STATE" annotation on card 1
   (2545:3784 / 2545:3787) draws - only the resting opacity moved. */
.mea-team-grid__cutout {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--mea-team-photo-radius);
  filter: grayscale(1);
  transition: filter 0.25s ease;
}

.mea-team-grid__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 20/1.3 and 16/1.5 are set on the elements that own the line boxes, not on
   the inline trigger inside the name: the parent theme's bare-element 18/300
   strut would otherwise join the line box and make the name row 28 instead
   of Figma's 26. */
.mea-team-grid__name {
  margin: 0;
  color: var(--mea-ink-display);
  font-size: var(--mea-type-h4-size);
  font-weight: var(--mea-weight-semibold);
  line-height: var(--mea-type-h4-lh);
}

.mea-team-grid__role {
  margin: 0;
  color: var(--mea-ink);
  font-size: var(--mea-type-p2-size);
  font-weight: var(--mea-weight-regular);
  line-height: var(--mea-type-p2-lh);
}

/* The whole card is the hit area; the trigger sits inside the name so the
   card keeps its heading semantics and the dialog gets a real button. */
.mea-team-grid__trigger {
  appearance: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.mea-team-grid__trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--mea-team-card-radius);
}

.mea-team-grid__card:hover,
.mea-team-grid__card:has(.mea-team-grid__trigger:focus-visible) {
  box-shadow: inset 0 0 0 1px var(--mea-accent-border);
}

/* Only a member with a cut-out gets a hover effect on the photo itself - the
   photo box carries no border/frame of its own; the card's own border above
   is the only frame. A member with no cut-out renders `__photo` instead (see
   render.php) and is untouched by this rule, keeping the square headshot as
   the permanent fallback. The glow is added to the resting `grayscale(1)`
   rather than fading a second image in, since the cut-out is now the resting
   portrait. */
.mea-team-grid__card:hover .mea-team-grid__cutout,
.mea-team-grid__card:has(.mea-team-grid__trigger:focus-visible) .mea-team-grid__cutout {
  filter: grayscale(1) drop-shadow(0 0 10px var(--mea-accent));
}

.mea-team-grid__trigger:focus-visible::after {
  outline: 2px solid var(--mea-accent-ink);
  outline-offset: 2px;
}

/* Editor-only note (see edit.js). It never renders on the front end. */
.mea-team-grid__editor-note {
  margin: 0;
  color: var(--mea-ink-2);
  font-family: var(--mea-font-mono);
  font-size: 13px;
}

/* ---------------------------------------------------------------- *
 * Interpolated: Figma supplies only the 1440 frame, so the grid steps to
 * 2-up on tablet and 1-up on mobile, and the section insets tighten in two
 * steps without ever exceeding the instance's own value.
 * ---------------------------------------------------------------- */
@media (max-width: 1023px) {
  .mea-team-grid {
    padding-top: min(var(--mea-team-pt, 80px), 80px);
    padding-bottom: min(var(--mea-team-pb, 100px), 80px);
  }
  .mea-team-grid__inner {
    gap: min(var(--mea-team-header-gap, 48px), 48px);
  }
  .mea-team-grid__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .mea-team-grid {
    padding-top: min(var(--mea-team-pt, 80px), 56px);
    padding-bottom: min(var(--mea-team-pb, 100px), 56px);
  }
  .mea-team-grid__inner {
    gap: min(var(--mea-team-header-gap, 48px), 32px);
  }
  .mea-team-grid__list {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ---------------------------------------------------------------- *
 * Bio dialog ("Popup", 2008:8032)
 * ---------------------------------------------------------------- */
.mea-team-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.mea-team-modal[hidden] {
  display: none;
}

.mea-team-modal__scrim {
  position: absolute;
  inset: 0;
  /* Flat black at 50%. Measured off the annotation render (2008:8028): the
     #fafafa page ground reads 125 through it, and 250 x (1 - a) = 125
     solves to exactly a = 0.5. No token carries a black scrim. */
  background-color: rgba(0, 0, 0, 0.5);
}

.mea-team-modal__panel {
  position: relative;
  display: flex;
  gap: 60px;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  /* 721 wide. Figma declares no horizontal inset on this frame: the column
     and the close control are centred inside it, and 487 + 60 + 49 = 596
     leaves 62.5px each side. Centring rather than writing 62.5px of padding
     is what keeps the column at its full 487 - a fractional padding costs
     the flex row a pixel and shifts the close control with it. */
  width: 721px;
  max-width: 100%;
  /* Figma's frame is a fixed 756 against 752 of content. Capped on the
     viewport instead, so a longer bio than the drawn one grows the panel
     rather than being clipped. */
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 60px 0;
  background-color: rgba(255, 255, 255, 0.9);
  /* Figma "GLASS", radius 8: a backdrop blur plus a hairline on the top
     and right edges only. Neither is a token value - they belong to the
     effect, not the palette. */
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--mea-panel-radius);
  /* 2008:8035 paints its three rows pure black, which tokens.css has no
     name for: --mea-ink-display is #1c1c1a, the card's ink, not this. */
  color: #000;
}

.mea-team-modal__body {
  display: flex;
  flex-direction: column;
  /* 2008:8033 spaces the portrait 41px above the name block. */
  gap: 41px;
  width: 487px;
  max-width: 100%;
}

.mea-team-modal__photo-wrap {
  width: 352px;
  max-width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  /* The lime plate (2008:8034) is the WRAPPER's background, and the
     portrait composites onto it: the delivered cut-outs are 704x704 RGBA,
     so the lime shows through the alpha. Nothing opaque, no border and no
     mask may go on the img inside, or the transparency is defeated. A
     member with no cut-out falls back to their square headshot, which
     covers the plate - that is the fallback working, not a styling gap. */
  background-color: var(--mea-accent-border);
  border-radius: var(--mea-team-photo-radius);
}

.mea-team-modal__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  filter: grayscale(1);
}

.mea-team-modal__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mea-team-modal__name {
  margin: 0;
  font-size: var(--mea-type-h2-size);
  font-weight: var(--mea-weight-medium);
  line-height: var(--mea-type-h2-lh);
}

.mea-team-modal__role {
  margin: 0;
  font-size: var(--mea-type-h4-size);
  font-weight: var(--mea-weight-semibold);
  line-height: var(--mea-type-h4-lh);
}

.mea-team-modal__bio {
  font-size: var(--mea-type-p2-size);
  font-weight: var(--mea-weight-regular);
  /* Instance override: 2008:8038 runs at 1.8, looser than the 1.5 "P2"
     style. Its family reads back as Roboto Regular, which nothing else in
     the file uses and no @font-face serves; treated as an unstyled default
     in the design file and rendered in Inter like every sibling row. */
  line-height: 1.8;
}

.mea-team-modal__bio > p {
  margin: 0 0 1em;
}

.mea-team-modal__bio > p:last-child {
  margin-bottom: 0;
}

.mea-team-modal__close {
  flex: none;
  display: block;
  width: 49px;
  height: 49px;
  padding: 0;
  appearance: none;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.mea-team-modal__close img {
  display: block;
  width: 100%;
  height: 100%;
}

.mea-team-modal__close:focus-visible {
  outline: 2px solid var(--mea-glow-teal);
  outline-offset: 2px;
}

/* Interpolated: below the 721px panel width the close control moves to the
   top-right corner and the column goes full width. */
@media (max-width: 767px) {
  .mea-team-modal {
    padding: 16px;
  }
  .mea-team-modal__panel {
    gap: 24px;
    padding: 24px;
  }
  .mea-team-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
  }
  .mea-team-modal__body {
    width: 100%;
  }
  .mea-team-modal__photo-wrap {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mea-team-grid__card,
  .mea-team-grid__photo-wrap,
  .mea-team-grid__cutout {
    transition: none;
  }
}

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