/* =========================================================
   EBLEX CLINICAL, strictly monochrome override
   Loaded AFTER styles.css. Reuses every Group component but
   forces black & white: #191919 / #D6D6D6, no orange anywhere.
   The single accent simply becomes white, and every glow/shadow
   (routed through --bio-rgb) turns to a soft white instead.
   Scoped to body.clinical (not :root) so it always beats the
   Group's body.accent-bold tokens. Clinical can never go orange,
   even if the bold accent was toggled elsewhere on the site.

   Clinical is the more restrained, premium sub-brand: lighter
   geometric headings, grey accent bars and small grey squares
   (not orange blocks), hairline rules, and dialled-down glow and
   motion. Audience is biotech / pharma trial sponsors.
   ========================================================= */
body.clinical {
  --bio:     #D6D6D6;            /* the accent is now white */
  --bio-2:   #B7B7B7;
  --bio-rgb: 214, 214, 214;      /* every glow/shadow becomes white */
  --gold:    #E6E6E6;
  /* Site-wide floating dots stay monochrome on Clinical: white/grey on the
     dark base, no orange. (No theme toggle here, so it never flips.) */
  --dots-base: #0E0E0E;
  --dots-c1:   #C8C8C8;
  --dots-c2:   #8C8C8C;
  /* Restrained silver wordmark gradient, no shine, no orange.
     #BFBFBF is the clinical palette's grey-chip tone. */
  --grad:      linear-gradient(120deg, #FFFFFF 0%, #BFBFBF 100%);
  --grad-soft: linear-gradient(120deg, rgba(214,214,214,.10), rgba(214,214,214,.04));
}

/* Safety net: Clinical must NEVER render orange. Even if a stale
   localStorage value or a query param tried to add the Group accent
   classes to this body, re-assert the monochrome tokens so the page
   stays black & white no matter what. */
body.clinical.accent-bold,
body.clinical.color-reversed {
  --bio:     #D6D6D6;
  --bio-2:   #B7B7B7;
  --bio-rgb: 214, 214, 214;
  --gold:    #E6E6E6;
  --grad:      linear-gradient(120deg, #FFFFFF 0%, #BFBFBF 100%);
  --grad-soft: linear-gradient(120deg, rgba(214,214,214,.10), rgba(214,214,214,.04));
}

/* ----- Restrained typography: lighter geometric headings than Group ----- */
/* Group leans on ExtraBold rounded headings; Clinical reads quieter. */
body.clinical h1,
body.clinical h2,
body.clinical h3,
body.clinical .section-title { font-weight: 500; }

/* ----- Primary buttons: clean white fill, ink text, neutral shadow ----- */
.btn-primary { color: #161616; }
body.clinical .btn-primary {
  box-shadow: 0 10px 28px -14px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.22);
}
body.clinical .btn-primary:hover {
  box-shadow: 0 16px 38px -16px rgba(0,0,0,.66), inset 0 0 0 1px rgba(255,255,255,.32);
}
::selection { background: rgba(214,214,214,.32); color: #161616; }

/* ----- Quieter ambient field: soften the corner blooms to near-flat black ----- */
body.clinical::before {
  background:
    radial-gradient(60vw 50vh at 12% -5%,  rgba(214,214,214,.05),  transparent 60%),
    radial-gradient(55vw 50vh at 95% 8%,   rgba(214,214,214,.05),  transparent 62%),
    radial-gradient(70vw 60vh at 50% 112%, rgba(214,214,214,.035), transparent 62%);
}

/* ----- Clinical accent cue: small GREY SQUARES instead of round dots ----- */
body.clinical .hero-badge .dot {
  border-radius: 2px;
  animation: none;                            /* calm, no pulsing halo */
  box-shadow: 0 0 0 3px rgba(214,214,214,.12);
}
body.clinical .chip .d        { border-radius: 1px; }
body.clinical .world-tag .ic  { border-radius: 2px; box-shadow: 0 0 8px rgba(214,214,214,.45); }

/* ----- Dial down motion & glow: calmer convergence, slower marquee ----- */
body.clinical .marquee-track { animation-duration: 48s; }
body.clinical .converge .ring .core { box-shadow: 0 0 14px rgba(214,214,214,.4); }
body.clinical .conv-engine .flow.bio,
body.clinical .conv-engine .flow.tech { box-shadow: 0 0 7px rgba(214,214,214,.55); }

/* ----- Restrained CTA panel: hairline frame, minimal wash ----- */
body.clinical .cta-panel {
  background: linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.02)), var(--bg-2);
  border-color: var(--line-2);
}
body.clinical .cta-panel::before {
  background: radial-gradient(50% 80% at 50% 0%, rgba(214,214,214,.08), transparent 70%);
}

/* Migrated photography reads black & white */
.world-card .ph img,
.member .avatar img { filter: grayscale(1) contrast(1.03); }

/* ----- Sponsor comparison table (Clinical only): Eblex Clinical vs CRO ----- */
.compare {
  margin-top: 8px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.compare-row {
  display: grid;
  grid-template-columns: 1.05fr 1.45fr 1.45fr;
  align-items: stretch;
  border-top: 1px solid var(--line);
}
.compare-row:first-child { border-top: 0; }
.compare-area, .compare-us, .compare-them {
  padding: 15px 20px; font-size: 15px; line-height: 1.4;
}
.compare-area { font-weight: 600; color: var(--text); display: flex; align-items: center; }
.compare-us {
  color: var(--text);
  background: rgba(214,214,214,.05);
  border-inline: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.compare-them { color: var(--muted); display: flex; align-items: center; }
.compare-us .b {
  flex: none; width: 7px; height: 7px; border-radius: 2px;
  background: var(--bio); box-shadow: 0 0 0 3px rgba(214,214,214,.12);
}
.compare-head { background: rgba(255,255,255,.025); }
.compare-head .compare-area,
.compare-head .compare-us,
.compare-head .compare-them {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--text); padding-top: 14px; padding-bottom: 14px;
}
.compare-head .compare-them { color: var(--muted); }
@media (max-width: 720px) {
  /* On phones the shared header row can't sit above every cell, so the two
     columns lose their labels and it's unclear which side is which. Instead,
     stack each comparison as its own card and give every value its own
     column label ("Eblex Clinical" / "Traditional CRO"), so it reads clearly
     at a glance with no cross-referencing. */
  .compare {
    display: flex; flex-direction: column; gap: 12px;
    background: transparent; border: 0; border-radius: 0; overflow: visible;
  }
  .compare-row.compare-head { display: none; }

  .compare-row {
    display: block;
    border: 1px solid var(--line-2);
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  }

  .compare-area {
    display: block;
    grid-column: auto;
    padding: 11px 16px;
    font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase;
    font-weight: 700; color: var(--text);
    background: rgba(255,255,255,.035);
    border-bottom: 1px solid var(--line);
  }

  .compare-us, .compare-them {
    display: block;
    padding: 12px 16px;
    border-inline: 0;
    background: transparent;
    font-size: 15px; line-height: 1.4;
  }
  .compare-us { color: var(--text); border-bottom: 1px solid var(--line); }
  .compare-them { color: var(--muted); }
  .compare-us .b { display: none; }

  .compare-us::before,
  .compare-them::before {
    display: block;
    font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    font-weight: 700; margin-bottom: 4px;
  }
  .compare-us::before   { content: "Eblex Clinical"; color: var(--bio); }
  .compare-them::before { content: "Traditional CRO"; color: var(--muted); opacity: .85; }
}

/* ----- Case-study Outcome bubble (feedback 3.8) ----- */
/* Keep everything inside the case-study cards one colour (white) and one font,
   so the bullets and the trailing note read consistently. The dot-on-top and
   extra bubble padding come from the shared styles.css rules. */
#case-study .role-tags span { color: var(--text); }
#case-study .sub-item { line-height: 1.5; }