/* ============================================================================
   LIFE SCIENCES SERVICES — page-scoped styles (.lss-*). Loaded only by
   life-sciences/services.html. Uses existing tokens; no shadows, no photos.
   Content container: 1200px usable width (1280px incl. gutters).
   ============================================================================ */
:root {
  --lss-card-bg: color-mix(in srgb, var(--icon-chip-bg) 28%, var(--white));
  --lss-rule:    color-mix(in srgb, var(--deep-blue) 30%, var(--white));   /* one visible hairline for every divider */
  --lss-gap: 24px;
}
.lss-hero > .wrap, .lss-caps > .wrap, .lss-eng-sec > .wrap, .lss-close-inner { max-width: 1280px; }

/* hero */
.lss-hero { position: relative; overflow: hidden; padding: 52px 0 58px; text-align: center;
  background: linear-gradient(90deg, var(--white) 0%, var(--white) 32%, color-mix(in srgb, var(--icon-chip-bg) 55%, var(--white)) 100%); }
.lss-decor { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lss-hero .wrap { position: relative; }
.lss-hero h1 { margin: 6px auto 20px; font-size: clamp(32px, 4.4vw, 52px); }
.lss-hero h1 span { display: block; }
.lss-hero .lede { max-width: 880px; margin: 0 auto 28px; font-size: 17px; line-height: 1.62; }

/* capabilities */
.lss-caps { background: var(--white); padding: 60px 0 56px; scroll-margin-top: 24px; }
.lss-caps h2, .lss-eng-sec h2 { margin: 6px 0 12px; }
.lss-caps .lss-intro { max-width: 1040px; }
.lss-eng-sec .lede { max-width: 820px; }
.lss-grid { display: grid; grid-template-columns: 1fr; column-gap: var(--lss-gap); row-gap: 0; margin-top: 32px; }
@media (min-width: 920px) { .lss-grid--caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lss-grid--eng { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lss-card {
  background: var(--lss-card-bg); border-radius: 10px; padding: 24px; margin-bottom: var(--lss-gap);
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-content: start; position: relative;
}
.lss-icon { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 56px; height: 56px; border-radius: 18px; background: var(--icon-chip-bg); color: var(--cool-teal-text); display: flex; align-items: center; justify-content: center; }
.lss-card h3 { grid-column: 2; grid-row: 1; align-self: start; margin: 2px 0 8px; font-size: 19px; line-height: 1.28; font-weight: var(--w-heading); }
.lss-desc { grid-column: 2; grid-row: 2; margin: 0 0 18px; font-size: 16px; line-height: 1.58; color: var(--ink); }
.lss-incl { grid-column: 1 / -1; grid-row: 3; align-self: start; border-top: 1px solid var(--lss-rule); padding-top: 14px; }
.lss-incl h4 { margin: 0 0 5px; font-size: 15px; font-weight: var(--w-heading); color: var(--cool-teal-text); }
.lss-incl p { font-size: 16px; line-height: 1.55; color: var(--ink); }
/* align icon/title, description and dividers across each row */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 920px) { .lss-grid--caps .lss-card { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; } }
  @media (min-width: 1100px) { .lss-grid--eng .lss-card { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; } }
}

/* context statement: rule, icon + message, rule (no box) */
.lss-note { display: flex; align-items: center; gap: 20px; margin-top: 8px; }
.lss-note::before, .lss-note::after { content: ""; flex: 1 1 0; border-top: 1px solid var(--lss-rule); }
.lss-note-icon { flex: none; display: flex; color: var(--cool-teal-text); }
.lss-note > div { flex: 0 1 780px; }
.lss-note h3 { margin: 0 0 2px; font-size: 17px; font-weight: var(--w-heading); }
.lss-note p { font-size: 15.5px; line-height: 1.55; color: var(--ink); }

/* engagement formats: navy section, white cards */
.lss-eng-sec { background: var(--deep-blue); padding: 56px 0 40px; }
.lss-eng-sec .lss-grid { margin-top: 40px; }
.lss-eng-sec .eyebrow { color: var(--medium-neutral); }
.lss-eng-sec h2 { color: var(--white); }
.lss-eng-sec .lede { color: var(--light-neutral); }
.lss-eng { background: var(--white); border-top: 3px solid var(--icon-chip-bg); border-radius: 8px; }
.lss-eng--lead { border-top-color: var(--cool-teal); }

/* closing */
.lss-close { background: color-mix(in srgb, var(--icon-chip-bg) 30%, var(--light-neutral)); padding: 44px 0; }
.lss-close-inner { margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.lss-close-copy { max-width: 760px; }
.lss-close h2 { margin: 4px 0 10px; font-size: clamp(24px, 2.6vw, 32px); }
.lss-close p { font-size: 16px; line-height: 1.58; }

.lss-hero a:focus-visible, .lss-caps a:focus-visible, .lss-close a:focus-visible { outline: 2px solid var(--deep-blue); outline-offset: 3px; }

/* narrow screens: description moves under the header and uses full width; rules and box-free note simplify */
@media (max-width: 679px) {
  .lss-hero { padding: 40px 0 44px; }
  .lss-decor { display: none; }
  .lss-hero h1 { font-size: 28px; }
  .lss-caps, .lss-eng-sec { padding: 48px 0 36px; }
  .lss-card { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; padding: 20px; }
  .lss-icon { grid-row: 1; width: 48px; height: 48px; border-radius: 15px; }
  .lss-card h3 { align-self: center; margin: 0; }
  .lss-desc { grid-column: 1 / -1; grid-row: 2; margin: 14px 0; }
  .lss-note { display: block; }
  .lss-note::before, .lss-note::after { display: none; }
  .lss-note-icon { margin-bottom: 8px; }
  .lss-close-inner { flex-direction: column; align-items: flex-start; }
}

/* ---- Waves around the navy "How we work together" section -------------------
   The ORIGINAL site waves (.wave / .wave-up from styles.css), unchanged. Each
   wrapper carries the colour of the section it joins (white above, the pale
   contact band below) so there is no seam or backing strip. Section padding is
   traded against the wave height so the layout does not grow. */
.lss-wave { line-height: 0; }
.lss-wave .wave { margin: 0; }
.lss-wave--top { background: var(--white); }
.lss-wave--bottom { background: color-mix(in srgb, var(--icon-chip-bg) 30%, var(--light-neutral)); }
.lss-wave + .lss-eng-sec { margin-top: -1px; padding-top: 28px; padding-bottom: 24px; }
.lss-eng-sec + .lss-wave { margin-top: -1px; }
.lss-caps { padding-bottom: 20px; }
.lss-wave + .lss-eng-sec .lss-grid { margin-top: 32px; }
.lss-wave--bottom + .lss-close { padding-top: 30px; }