/* ==========================================================================
   Health — health.drfigo.com
   White ground, maroon accents, and the most whitespace of the three sites.
   Surface ratio comes from .site-health in tokens.css.
   ========================================================================== */

.section { padding-block: var(--sp-9); }
.hero { padding-block: var(--sp-9) var(--sp-8); }

/* --------------------------------------------------------------------------
   The lab panel — the signature moment.
   -------------------------------------------------------------------------- */

.lab-section { padding-block-end: var(--sp-9); }

.lab {
  background: var(--surface);
  border-block-start: 2px solid var(--brand);
  padding: var(--sp-6) var(--gutter);
}

.lab__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
}

.lab__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  color: var(--brand);
}

.lab__tag {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--brand);
  border: 1px solid var(--brand);
  padding: 2px var(--sp-2);
  white-space: nowrap;
}

.lab__rows {
  display: grid;
  gap: var(--sp-6);
  margin-block-start: var(--sp-6);
}

.lab-row { display: grid; gap: var(--sp-2); }

.lab-row__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.lab-row__name {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
}

.lab-row__val {
  font-family: var(--font-en);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--ink-quiet);
}

/* The track is a numeric scale, and numeric scales read left to right in both
   languages. This is a hard direction lock rather than a [dir] override: the
   band and pin percentages are authored against an LTR axis and must not
   mirror when the page does. */
.lab-track {
  direction: ltr;
  position: relative;
  block-size: 10px;
  background: rgba(15, 13, 13, .07);
  overflow: visible;
}

.lab-band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--band-start, 0%);
  width: var(--band-width, 100%);
  background: rgba(15, 13, 13, .16);
}

.lab-pin {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: var(--pin, 0%);
  width: 3px;
  background: var(--ink);
  transform: translateX(-50%);
}

/* Out of range is the only place colour is doing semantic work on this page. */
.lab-row.is-out .lab-pin { background: var(--brand); width: 4px; }
.lab-row.is-out .lab-row__state { color: var(--brand); font-weight: 700; }

.lab-row__state {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--ink-quiet);
}

/* Pins slide in from the start of their track, staggered down the panel.
   Scoped to .js: with scripting off each pin is already at its value and
   --travel is never set, so the transform resolves to the resting position. */
.js [data-lab] .lab-pin {
  transform: translateX(-50%) translateX(var(--travel, 0px));
}

.js [data-lab].is-in .lab-pin {
  transform: translateX(-50%);
  transition: transform 620ms var(--ease-out);
  transition-delay: var(--pin-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-lab] .lab-pin { transform: translateX(-50%); transition: none; }
}

.lab__foot {
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--rule);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--ink);
}

.lab__note {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--ink-quiet);
}

/* --------------------------------------------------------------------------
   Team — composition and scope, never people.
   -------------------------------------------------------------------------- */

.roles {
  display: grid;
  gap: 0;
  margin-block-start: var(--sp-6);
  border-block-start: 1px solid var(--rule);
}

.role {
  display: grid;
  gap: var(--sp-2);
  padding-block: var(--sp-5);
  border-block-end: 1px solid var(--rule);
}

.role__name {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--brand);
}

.role__scope {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--ink-quiet);
  max-inline-size: var(--measure);
}

/* --------------------------------------------------------------------------
   Home visit
   -------------------------------------------------------------------------- */

.home-grid {
  display: grid;
  gap: var(--sp-3);
  margin-block-start: var(--sp-6);
}

.home-item {
  background: var(--surface);
  padding: var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  border-inline-start: 2px solid var(--brand);
}

.cta-row { margin-block-start: var(--sp-6); }

.disclaimer {
  margin-block-start: var(--sp-7);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--rule);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--ink-quiet);
  max-inline-size: var(--measure);
}

@media (min-width: 700px) {
  .lab { padding: var(--sp-7); }
  .lab__rows { gap: var(--sp-7); }
  .roles { grid-template-columns: 1fr 1fr; column-gap: var(--sp-7); }
  .home-grid { grid-template-columns: 1fr 1fr; }
}