/* ============================================================================
   LIFE SCIENCES OVERVIEW — page-scoped styles (.lso-*). Loaded only by
   life-sciences/index.html. The two section waves are the ORIGINAL site
   waves (.wave / .wave-up from styles.css), reused unchanged; nothing here
   restyles them. Existing tokens only; no shadows, no photos.
   ============================================================================ */
:root { --lso-rule: color-mix(in srgb, var(--deep-blue) 22%, var(--white)); }

/* hero: canvas background so the wave's light side joins seamlessly */
.lso-hero { position: relative; overflow: hidden; padding-top: 56px; }
.lso-decor { position: absolute; inset: 0 0 auto 0; width: 100%; height: 100%; pointer-events: none; }
.lso-hero .wrap { position: relative; }
.lso-hero h1 { max-width: 16em; margin: 6px auto 20px; font-size: clamp(32px, 4.2vw, 52px); text-wrap: balance; }
/* two balanced lines on wide screens by CSS only; phones wrap naturally */
@media (min-width: 900px) { .lso-hero h1 { max-width: none; } .lso-hero h1 .hero-em { display: block; } }
.lso-hero .lede { max-width: 820px; margin: 0 auto 30px; font-size: 17px; line-height: 1.62; }

/* navy situations */
.lso-situations { padding-top: 44px; padding-bottom: 56px; }
.lso-head { max-width: 760px; margin: 0 0 32px; }
.lso-head h2 { color: var(--white); margin: 6px 0 12px; }
.lso-head .lede { color: var(--light-neutral); max-width: 680px; }
.lso-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lso-card { background: var(--white); border-radius: 10px; padding: 26px 26px 28px; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; align-content: start; }
.lso-icon { grid-column: 1; grid-row: 1; width: 52px; height: 52px; border-radius: 16px; background: var(--icon-chip-bg); color: var(--cool-teal-text); display: flex; align-items: center; justify-content: center; }
.lso-card h3 { grid-column: 2; grid-row: 1; align-self: center; margin: 0; font-size: 19px; line-height: 1.28; font-weight: var(--w-heading); color: var(--deep-blue); }
.lso-card p { grid-column: 1 / -1; grid-row: 2; margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--ink); text-align: left; }
.lso-cta { margin-top: 34px; text-align: center; }
.lso-arrow { display: inline-flex; margin-left: 8px; vertical-align: middle; }

/* experience */
.lso-exp { padding-bottom: 64px; }
.lso-exp-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.lso-exp-copy h2 { margin: 6px 0 20px; }
.lso-exp-copy .body-copy { max-width: 580px; }
.lso-exp-copy .body-copy + .body-copy { margin-top: 14px; }
.lso-exp-copy .arrowlink { margin-top: 12px; }
.lso-panel { background: color-mix(in srgb, var(--icon-chip-bg) 28%, var(--white)); border-radius: 10px; padding: 34px 36px; }
.lso-figure { font-size: clamp(52px, 6vw, 72px); line-height: 1; font-weight: var(--w-heading); color: var(--cool-teal-text); letter-spacing: -0.02em; }
.lso-figure-label { margin-top: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--lso-rule); font-size: 18px; line-height: 1.35; font-weight: var(--w-heading); color: var(--deep-blue); }
.lso-panel-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; }
.lso-panel-list li { display: flex; align-items: center; gap: 16px; font-size: 16px; line-height: 1.4; color: var(--ink); }
.lso-pi { flex: none; width: 36px; display: flex; justify-content: center; color: var(--cool-teal-text); }

/* engagement-fit strip */
.lso-fit { background: color-mix(in srgb, var(--icon-chip-bg) 30%, var(--light-neutral)); padding: 36px 0; }
.lso-fit-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 26px; }
.lso-fit-icon { flex: none; width: 72px; height: 72px; border-radius: 18px; background: var(--icon-chip-bg); color: var(--cool-teal-text); display: flex; align-items: center; justify-content: center; }
.lso-fit-copy { flex: 1; min-width: 0; }
.lso-fit-copy h2 { margin: 4px 0 8px; font-size: clamp(22px, 2.2vw, 28px); }
.lso-fit-copy p { max-width: 760px; font-size: 16px; line-height: 1.58; color: var(--ink); }
.lso-fit .arrowlink { flex: none; }

.lso-hero a:focus-visible, .lso-exp a:focus-visible, .lso-fit a:focus-visible { outline: 2px solid var(--deep-blue); outline-offset: 3px; }

@media (max-width: 979px) {
  .lso-cards { grid-template-columns: 1fr; }
  .lso-exp-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 860px) {
  .lso-fit-inner { flex-wrap: wrap; }
  .lso-fit-copy { flex-basis: calc(100% - 100px); }
  .lso-fit .arrowlink { flex-basis: 100%; }
}
@media (max-width: 679px) {
  .lso-hero { padding-top: 40px; }
  .lso-decor { display: none; }
  .lso-situations { padding-top: 32px; padding-bottom: 44px; }
  .lso-card { padding: 22px 20px 24px; }
  .lso-panel { padding: 28px 24px; }
  .lso-fit-icon { width: 56px; height: 56px; }
  .lso-fit-copy { flex-basis: 100%; }
}

/* closing band: heading on one line when it fits */
.lso-band .cta-band-copy { max-width: 780px; }
.lso-band h2 { font-size: clamp(24px, 2.6vw, 32px); }

/* Button label + arrow flow as one line of text, so a wrapped label keeps the arrow with it. */
.lso-cta .btn { display: inline-block; text-align: center; line-height: 1.5; }

/* Experience heading: two intentional lines (navy phrase, then teal italic phrase). */
.lso-h-a, .lso-h-b { display: block; }
.lso-exp-copy h2 { font-size: clamp(27px, 3.1vw, 40px); }