/* "Where it applies" — three-domain section between Ecosystem and
   "Built different, by design". Every custom property used below is already
   defined by contact.CW3nh7dV.css (the live site's token bundle), so nothing
   is redefined here and no existing token is altered.

   Pure CSS only — no JS. */

/* Sitewide .section gives 96px top+bottom. The ecosystem section already
   contributes 96px of its own bottom padding, so this section's share of the
   gap above it is zeroed the same way built-different.css does for the
   section that follows this one — see the comment there. */
.section.where-it-applies {
  padding-top: 0;
}

/* Matches the bump ecosystem-fix.css and built-different.css give their own
   .eyebrow-pill, so all three read at the same size. */
.where-it-applies .eyebrow-pill {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
}

.where-it-applies__intro {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.where-it-applies__heading {
  font-size: var(--type-section-headline);
  font-weight: 700;
  margin-top: var(--space-3);
  line-height: 1.15;
}

/* Force it onto one line above the width where the wrap actually starts
   looking cramped rather than intentional. .where-it-applies__intro caps at
   720px, narrower than this heading at full size — text-align:center alone
   does NOT keep an overflowing nowrap line centered (the line box just
   overflows past the block's right edge), so the block is sized to its
   content and re-centered explicitly via the left:50%/translateX(-50%)
   trick instead. Left wrapping in below 700px: at mobile sizes a single
   unbroken line would either overflow the viewport or force the font down
   too far to stay legible, and a two-line wrap there reads as normal, not
   broken. */
@media (min-width: 700px) {
  .where-it-applies__heading {
    white-space: nowrap;
    width: max-content;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}

.where-it-applies__body {
  margin-top: var(--space-4);
  font-size: var(--type-body);
  color: var(--color-gray-300);
}

.where-it-applies__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.wia-card {
  --wia-glow-pos: 85% 50%;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-7);
  border: 1px solid var(--wia-border);
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 140% at var(--wia-glow-pos), var(--wia-glow), transparent 60%),
    var(--color-ink-900);
  /* Asymmetric: the vertical padding was the same 32px as the horizontal and
     compounded the dead space beside the shorter text column. */
  padding: var(--space-5) var(--space-6);
  overflow: hidden;
}

/* Media on the left instead of the right: flip both the flex order and the
   glow's anchor point, so the card's own background lines up with where the
   illustration actually sits. */
.wia-card--reverse {
  --wia-glow-pos: 15% 50%;
  flex-direction: row-reverse;
}

.wia-card--biomedical {
  --wia-border: rgba(255, 27, 143, 0.55);
  --wia-glow: rgba(255, 27, 143, 0.16);
}

.wia-card--regulatory {
  --wia-border: rgba(122, 0, 255, 0.55);
  --wia-glow: rgba(122, 0, 255, 0.18);
}

.wia-card--federal {
  --wia-border: rgba(255, 106, 0, 0.55);
  --wia-glow: rgba(255, 106, 0, 0.16);
}

.wia-card__text {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  z-index: 1;
}

.wia-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.wia-card__badge {
  flex-shrink: 0;
  min-width: 34px;
  height: 26px;
  padding-inline: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--wia-border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-paper);
}

.wia-card__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.wia-card__title {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 700;
  color: var(--color-paper);
  line-height: 1.3;
}

.wia-card__underline {
  display: block;
  width: 72px;
  height: 3px;
  border-radius: 999px;
  background: var(--gradient-brand);
}

.wia-card__body {
  font-size: var(--type-body);
  color: var(--color-gray-300);
  line-height: 1.7;
  max-width: 48ch;
}

.wia-card__media {
  flex: 1 1 46%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* Two caps, and the HEIGHT one is the one that matters.

   max-width 420px, not more: the three sources are 450, 474 and 436 CSS px
   wide, so this keeps every one at or below native size. Above ~436 the
   narrowest would upscale and go soft while the other two stayed crisp, which
   reads as one broken image rather than a size change.

   max-height 270px is what governs the card. The illustrations are far taller
   than the text column beside them (~158px), so before this the image dictated
   the card height and the text floated in the middle of ~79px of dead space
   top and bottom. It also normalises the three different aspect ratios — all
   three now render exactly 270px tall, so the cards match instead of each
   being a slightly different height.

   Width is the free dimension: 358, 389 and 401px respectively. Every one is
   still wider than the 320px this used to be capped at. */
.wia-card__media img {
  width: 100%;
  max-width: 420px;
  height: auto;
  max-height: 270px;
  display: block;
}

@media (max-width: 860px) {
  .wia-card,
  .wia-card--reverse {
    flex-direction: column;
    text-align: center;
    gap: var(--space-5);
    padding: var(--space-5);
  }

  .wia-card__head {
    flex-direction: column;
  }

  .wia-card__title-group {
    align-items: center;
  }

  .wia-card__body {
    max-width: none;
  }

  .wia-card__media img {
    max-width: 320px;
  }
}