/* =========================================================================
   IRVx Softlabs : home.css
   Homepage-only sections (on top of base.css and components.css): the impact
   card, 50+ Years Young, the global band, the process ledger, the partners
   strip and the summit call to action. Navy, white and blue. Flat colour.
   ========================================================================= */

:root { --impact-overlap: 120px; }

/* ---------------------------------------------------------------- Impact */
.impact { position: relative; z-index: 2; margin-top: calc(var(--impact-overlap) * -1); padding-bottom: 8px; }
.impact__card {
  background: var(--ink); color: var(--white);
  border: 1px solid var(--line-dark); border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7);
  padding: clamp(1.4rem, 2.5vw, 2.4rem) clamp(1.25rem, 2.5vw, 2.4rem) 1.3rem;
}
.impact__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; margin-bottom: 1.4rem; }
.impact__head .label { margin: 0; }
.impact__head h2 { color: var(--white); font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem); margin: 0; }
.impact__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.impact__grid li { display: flex; flex-direction: column; padding: .4rem 1.5rem .6rem 0; margin-right: 1.5rem; border-right: 1px solid var(--line-dark); min-width: 0; }
.impact__grid li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.impact__grid .ic { width: 42px; height: 42px; border-radius: 12px; background: rgba(110, 168, 255, .16); color: var(--blue-on-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: .9rem; }
.impact__grid .k { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.impact__grid .v { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 1rem + 1.9vw, 2.9rem); letter-spacing: -.04em; line-height: 1.1; color: var(--white); font-variant-numeric: tabular-nums; margin: .25rem 0 .2rem; }
.impact__grid .v em { font-style: normal; color: var(--blue-bright); }
.impact__grid .s { font-size: .86rem; color: var(--on-dark); }
.impact__grid .chip { display: inline-flex; align-items: center; gap: .2rem; align-self: flex-start; margin-top: .6rem; padding: .25rem .6rem .25rem .35rem; border-radius: var(--radius-pill); background: rgba(110, 168, 255, .16); color: var(--white); font-size: .78rem; }
.impact__grid .chip svg { color: var(--blue-on-dark); font-size: 1.1rem; }
.impact__grid .chip b { color: var(--blue-on-dark); font-weight: 700; margin-right: .2rem; font-variant-numeric: tabular-nums; }
.impact__grid .bar { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; margin: .35rem 0 .55rem; }
.impact__grid .bar i { display: block; height: 100%; width: var(--p, 10%); background: var(--blue-bright); border-radius: 3px; transform-origin: 0 50%; }
.impact__foot { margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line-dark); font-size: .8rem; color: var(--on-dark-muted); }
html.has-motion .impact__grid .bar i { transform: scaleX(0); }
@media (max-width: 1199.98px) {
  .impact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 0; }
  .impact__grid li:nth-child(2n) { border-right: 0; margin-right: 0; padding-right: 0; }
  .impact__grid li:nth-child(-n + 2) { border-bottom: 1px solid var(--line-dark); padding-bottom: 1.25rem; }
}
@media (max-width: 575.98px) {
  :root { --impact-overlap: 72px; }
  .impact__grid { grid-template-columns: 1fr; }
  .impact__grid li { border-right: 0; margin-right: 0; padding: 1rem 0; border-bottom: 1px solid var(--line-dark); }
  .impact__grid li:first-child { padding-top: 0; }
  .impact__grid li:last-child { border-bottom: 0; padding-bottom: .25rem; }
  /* Phones: the four figures stack, so the icon tiles go and the card stays short */
  .impact__grid .ic { display: none; }
}

/* ---------------------------------------------------------------- Legacy */
/* 50+ Years Young, as in the mockup: the copy beside four cards, each a photo over a white
   card with its blue label and one line. The copy sits centred against the cards. */
.legacy__grid { display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 8.5fr); gap: 2.5rem 3.5rem; align-items: center; }
.legacy__copy h2 { font-size: clamp(1.8rem, 1.2rem + 1.2vw, 2.3rem); margin: 0 0 1.2rem; }
.legacy__copy p { font-size: 1.06rem; line-height: 1.65; max-width: 34rem; margin: 0 0 1.8rem; }
.legacy .people { gap: 1rem; }
.pcard--card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 12px 30px -24px rgba(11, 18, 32, .45); }
.pcard--card .pcard__ph { aspect-ratio: 15 / 16; border-radius: 0; }
.pcard--card .pcard__ph img { object-position: 50% 30%; }
.pcard--card figcaption { flex: 1 0 auto; padding: 1rem .95rem 1.1rem; }
.pcard--card .pcard__label { margin-bottom: .4rem; }
.pcard--card .pcard__text { font-family: var(--sans); font-weight: 400; font-size: .92rem; line-height: 1.5; letter-spacing: 0; color: var(--ink); }
@media (max-width: 1199.98px) { .legacy__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem 2.5rem; } }
/* 992 to 1199px: the copy stacks above, so the four cards keep one row instead of a tall 2 x 2 */
@media (max-width: 1199.98px) and (min-width: 992px) { .legacy__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } .legacy__copy p { max-width: 40rem; } }
@media (max-width: 575.98px) {
  .legacy .people { gap: .75rem; }
  .pcard--card figcaption { padding: .8rem .85rem .9rem; }
  .pcard--card .pcard__text { font-size: .88rem; }
}
@media (max-width: 991.98px) { .legacy__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Global */
.global { background: var(--ink); color: var(--on-dark); padding: clamp(56px, 6vw, 88px) 0; }
.global__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5.6fr) minmax(0, 3fr); gap: 2rem 2.5rem; align-items: center; }
.global h2 { color: var(--white); font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.3rem); margin: 0 0 .9rem; }
.global h3 { color: var(--white); font-size: clamp(1.35rem, 1rem + 1.1vw, 1.8rem); margin: 0 0 .8rem; }
.global p { color: var(--on-dark); font-size: .98rem; }
.global__cities { list-style: none; margin: 1.2rem 0 1.5rem; padding: 0; border-top: 1px solid var(--line-dark); }
.global__cities li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .25rem 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line-dark); font-size: .9rem; }
.global__cities b { color: var(--white); font-family: var(--display); font-weight: 700; }
.global__commit { border-left: 1px solid var(--line-dark); padding-left: 2.5rem; position: relative; }
.global__tri { font-family: var(--display); font-weight: 700; color: var(--white); font-size: 1.02rem; }
@media (max-width: 1199.98px) {
  .global__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .global__grid .wmap { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 767.98px) {
  .global__grid { grid-template-columns: 1fr; }
  .global__commit { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-dark); padding-top: 2rem; }
}

/* ---------------------------------------------------------------- Ledger */
/* We Build From Inside Healthcare: the seven steps as one ruled ledger on white, between
   the navy global band and the soft Platforms section. A ghost number, the verb in display
   type, the sentence set small on the right. The row crossing the middle of the viewport is
   lit (number fills, rule turns blue) and, only once the script runs (.is-live), the others
   sit back. At rest, and without JavaScript, every row is fully readable. */
.ledger { background: var(--white); }
.ledger__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 5rem; align-items: end; margin-bottom: clamp(2.5rem, 4vw, 4.5rem); }
.ledger__head h2 { font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.8rem); max-width: 16ch; margin: 0; }
.ledger__head h2 .w { display: inline-block; }
.ledger__lead { font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); line-height: 1.6; color: var(--body); max-width: 38ch; margin: 0 0 .35em; }

.ledger__list { list-style: none; margin: 0; padding: 0; }
.ledger__row {
  position: relative;
  display: grid;
  grid-template-columns: clamp(4.5rem, 3.5rem + 3vw, 7rem) minmax(0, 1fr) minmax(0, 28rem);
  gap: 0 2rem;
  align-items: baseline;
  padding: clamp(1.5rem, .9rem + 1.5vw, 2.3rem) 0;
}
.ledger__rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-strong); transform-origin: 0 50%; transition: background-color .5s ease; }
.ledger__rule--end { top: auto; bottom: 0; }
.ledger__n {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.2rem, 1.3rem + 2.6vw, 3.8rem);
  line-height: 1; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--blue-bright);
  transition: color .5s ease;
}
@supports (-webkit-text-stroke: 1px #000) {
  .ledger__n { color: transparent; -webkit-text-stroke: 2px var(--blue-bright); }
}
.ledger__verb { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem); letter-spacing: -.035em; line-height: 1; margin: 0; color: var(--ink); transition: color .5s ease; }
.ledger__text { font-size: 1.1rem; line-height: 1.55; color: var(--body); margin: 0; transition: color .5s ease; }

/* Lit row: number fills, rule turns blue. The rows are not interactive: no hover state. */
.ledger__row.is-active .ledger__n { color: var(--blue-bright); -webkit-text-stroke-width: 0; }
.ledger__row.is-active .ledger__rule--top { background: var(--blue-bright); }
/* Once the script runs, the rows that are not lit sit back (muted is 5.8:1 on white) */
.ledger__list.is-live .ledger__row:not(.is-active) .ledger__verb,
.ledger__list.is-live .ledger__row:not(.is-active) .ledger__text { color: var(--muted); }

@media (max-width: 1199.98px) {
  .ledger__row { grid-template-columns: clamp(4.5rem, 3.5rem + 3vw, 7rem) minmax(0, 1fr) minmax(0, 22rem); }
}
@media (max-width: 991.98px) {
  .ledger__head { grid-template-columns: 1fr; gap: 1.25rem; }
  .ledger__lead { max-width: 52ch; }
  .ledger__row { grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-areas: "n verb" ". text"; gap: .6rem 1rem; align-items: baseline; }
  .ledger__n { grid-area: n; }
  .ledger__verb { grid-area: verb; }
  .ledger__text { grid-area: text; max-width: 46ch; }
}
@media (max-width: 575.98px) {
  .ledger__row { grid-template-columns: 3.4rem minmax(0, 1fr); gap: .5rem .75rem; padding: 1.4rem 0; }
  .ledger__text { font-size: .98rem; }
}

/* ------------------------------------------------------------- Platforms */
/* Two platforms, side by side: the real logo, one line, one sentence, the chain */
.platforms__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.platform { display: flex; flex-direction: column; padding: clamp(1.6rem, 2.5vw, 2.5rem); border-radius: 20px; background: var(--white); border: 1px solid var(--line); transition: border-color .3s ease, box-shadow .3s ease; }
.platform:hover { border-color: var(--blue); box-shadow: var(--shadow); }
.platform__logo { display: block; align-self: flex-start; height: 40px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; margin-bottom: 1.6rem; }
.platform h3 { font-size: clamp(1.35rem, 1rem + 1.1vw, 1.8rem); letter-spacing: -.03em; margin: 0 0 .7rem; max-width: 20ch; }
.platform p { font-size: 1.02rem; margin: 0 0 1.2rem; max-width: 46ch; }
.platform__chain { font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: var(--muted); padding-top: 1rem; border-top: 1px solid var(--line); margin-bottom: 1.2rem; }
.platform .more { display: inline-flex; align-items: center; align-self: flex-start; gap: .45rem; min-height: 44px; font-weight: 600; color: var(--blue); margin-top: auto; }
.platform .more svg { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.platform:hover .more svg { transform: translateX(5px); }
@media (max-width: 767.98px) { .platforms__grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- Partners */
/* "Trusted by leading healthcare organizations": copy left, two rows of real logos right */
.partners { background: var(--bg-soft); padding: clamp(48px, 5.5vw, 80px) 0; }
.partners__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 2rem 4rem; align-items: center; }
.partners__copy h2 { font-family: var(--sans); font-size: .95rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); line-height: 1.5; margin: 0 0 .8rem; max-width: 21ch; }
.partners__copy p { font-size: .92rem; color: var(--body); max-width: 30ch; margin: 0 0 1.2rem; }
@media (max-width: 991.98px) {
  .partners__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .partners__copy h2, .partners__copy p { max-width: none; }
  }

/* ------------------------------------------------------------------- CTA */
.cta { position: relative; overflow: hidden; background: #0a0d14; color: var(--white); padding: clamp(80px, 9vw, 140px) 0; }
.cta__bg { position: absolute; inset: -60px 0; margin: 0; z-index: 0; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; display: block; }
.cta__tint { position: absolute; inset: 0; z-index: 0; background: rgba(8, 11, 18, .58); }
.cta__inner { position: relative; z-index: 1; }
.cta__copy { max-width: 44rem; }
.cta h2 { color: var(--white); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); max-width: 14ch; margin: 0 0 .9rem; }
.cta h2 .w { display: inline-block; }
.cta__sub { font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); color: var(--white); margin: 0 0 .8rem; }
.cta__text { color: var(--on-dark); font-size: 1.02rem; max-width: 38rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }