/* ============================================================
   BioHealthcare — The Elite Membership Journey
   "Three Steps. One Connected Healthcare Ecosystem."
   Page-specific styles. Loaded AFTER membership.css, which
   supplies the design tokens and shared components
   (.wrap, .lede, .eyebrow, .accent-word, .it, .tlink).
   ============================================================ */

/* ---- Reveal-on-scroll (added by JS; degrades gracefully) ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   ETHOS / INTRO
   ============================================================ */
.ej-ethos { padding-top: clamp(48px, 5vw, 88px); }
.ej-ethos-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(36px, 5vw, 92px);
  align-items: start;
  padding-bottom: clamp(44px, 4.6vw, 76px);
  border-bottom: 1px solid var(--line);
}
.ej-ethos .eyebrow { display: block; margin-bottom: clamp(20px, 2vw, 30px); }
.ej-ethos-line {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.ej-ethos-line--accent { font-style: italic; color: #7e945f; }
.ej-ethos-body { display: flex; flex-direction: column; gap: 22px; padding-top: 6px; }
.ej-ethos-body .lede { max-width: 52ch; font-size: clamp(15px, 1.15vw, 18px); }
.ej-belief {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 27px);
  line-height: 1.3;
  color: var(--ink);
  max-width: 30ch;
}

/* ============================================================
   THE THREE STEPS
   ============================================================ */
.ej-steps { padding-top: clamp(44px, 4.6vw, 78px); }
.ej-steps-head { max-width: 720px; margin-bottom: clamp(34px, 4vw, 58px); }
.ej-steps-head .eyebrow { display: block; margin-bottom: 20px; }
.ej-steps-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.ej-steps-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ej-step {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(26px, 4vw, 76px);
  padding: clamp(34px, 3.8vw, 64px) 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.ej-step-content { max-width: 56ch; }
/* alternate the image side for editorial rhythm */
.ej-step:nth-child(even) .ej-step-content { order: 2; }
.ej-step-tag {
  font-family: var(--sans);
  font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
}
.ej-step-tag .ej-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(40px, 4vw, 64px);
  line-height: 1;
  color: var(--sage);
  letter-spacing: -0.02em;
}
.ej-step-tag .ej-rule { flex: 1; height: 1px; background: var(--line-strong); }
.ej-step h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  color: var(--ink);
}
.ej-step p { font-size: clamp(14px, 1.05vw, 16px); line-height: 1.7; color: var(--ink-soft); margin-bottom: 14px; }
.ej-step p:last-child { margin-bottom: 0; }
.ej-step .bbt { color: var(--accent); font-weight: 500; white-space: nowrap; }
.ej-step-media { align-self: stretch; overflow: hidden; border-radius: 2px; }
.ej-step-media image-slot {
  width: 100%; height: 100%;
  min-height: clamp(260px, 28vw, 400px);
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.ej-step:hover .ej-step-media image-slot { transform: scale(1.03); }
/* small region chips under step 01 */
.ej-regions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ej-regions span {
  font-family: var(--sans);
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 16px;
}

/* ============================================================
   WHAT WE MEASURE — biological baseline grid (Step 02 depth)
   ============================================================ */
.ej-assess { background: var(--sand); margin-top: clamp(44px, 4.6vw, 78px); padding-block: clamp(44px, 4.6vw, 76px); }
.ej-assess-head { max-width: 720px; margin-bottom: clamp(30px, 3.2vw, 48px); }
.ej-assess-head .eyebrow { display: block; margin-bottom: 18px; }
.ej-assess-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 2.7vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.ej-assess-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}
.ej-assess-list li {
  font-family: var(--serif);
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.3;
  color: var(--ink);
  padding: clamp(18px, 1.9vw, 26px) clamp(16px, 1.6vw, 24px) clamp(18px, 1.9vw, 26px) calc(clamp(16px,1.6vw,24px) + 22px);
  border-bottom: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
  position: relative;
  transition: background .25s ease;
}
.ej-assess-list li::before {
  content: ""; position: absolute;
  left: clamp(16px,1.6vw,24px); top: calc(clamp(18px,1.9vw,26px) + 0.55em);
  width: 7px; height: 7px; border-radius: 50%; background: var(--sage);
}
.ej-assess-list li:hover { background: rgba(60,71,51,0.05); }

/* ============================================================
   BIOBODYTRACK™ — the centre of the ecosystem (Step 03 depth)
   ============================================================ */
.ej-bbt { background: var(--charcoal); color: var(--ivory); margin-top: clamp(44px, 4.6vw, 78px); padding-block: clamp(52px, 5.4vw, 92px); }
.ej-bbt-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(36px, 5vw, 88px); align-items: center; }
.ej-bbt-text .eyebrow.on-dark { display: block; margin-bottom: 24px; }
.ej-bbt-h {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1.07;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.ej-bbt-h .it { display: block; color: #c2cda6; }
.ej-bbt-text p { font-size: 14.5px; line-height: 1.7; color: rgba(244,240,232,.72); max-width: 44ch; margin-bottom: 22px; }
.ej-negations { display: flex; flex-direction: column; gap: 6px; margin-top: 26px; }
.ej-negations span {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(16px, 1.4vw, 21px); color: var(--ivory); line-height: 1.3;
  padding-left: 22px; position: relative;
}
.ej-negations span::before {
  content: ""; position: absolute; left: 0; top: 0.7em;
  width: 12px; height: 1.5px; background: var(--sage);
}
/* integrated components — connected nodes */
.ej-bbt-nodes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid rgba(244,240,232,.16); border-left: 1px solid rgba(244,240,232,.16); }
.ej-bbt-nodes li {
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em;
  color: rgba(244,240,232,.92);
  padding: clamp(16px,1.8vw,22px) clamp(16px,1.6vw,22px);
  border-bottom: 1px solid rgba(244,240,232,.16);
  border-right: 1px solid rgba(244,240,232,.16);
  display: flex; align-items: center; gap: 12px;
  transition: background .25s ease;
}
.ej-bbt-nodes li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sage); flex-shrink: 0;
}
.ej-bbt-nodes li:hover { background: rgba(244,240,232,.05); }

/* ============================================================
   THE ELITE ADVANTAGE — "We provide..." 
   ============================================================ */
.ej-advantage { padding-top: clamp(48px, 5vw, 86px); }
.ej-adv-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 5vw, 88px); align-items: start; }
.ej-adv-text .eyebrow { display: block; margin-bottom: 22px; }
.ej-adv-h {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.ej-adv-text .lede { margin-bottom: 26px; }
.ej-role {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.3;
  color: var(--accent);
  max-width: 26ch;
}
.ej-provide { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ej-provide li {
  display: flex; align-items: baseline; gap: 18px;
  padding: clamp(15px, 1.5vw, 20px) 0;
  border-bottom: 1px solid var(--line);
}
.ej-provide .ej-provide-k {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sage);
  flex-shrink: 0; width: 88px;
}
.ej-provide .ej-provide-v {
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 23px);
  line-height: 1.25;
  color: var(--ink);
}

/* ============================================================
   CLOSING / ENQUIRE
   ============================================================ */
.ej-closing { background: var(--forest); color: var(--ivory); text-align: center; margin-top: clamp(52px, 5.4vw, 92px); padding-block: clamp(64px, 7vw, 120px); }
.ej-closing .eyebrow.on-dark { display: block; margin-bottom: clamp(24px, 2.6vw, 36px); }
.ej-closing-lines { display: flex; flex-direction: column; gap: 4px; margin-bottom: clamp(26px, 2.8vw, 38px); }
.ej-closing-lines span {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 42px);
  line-height: 1.16;
  letter-spacing: -0.01em;
}
.ej-closing-lines .ej-result { font-style: italic; color: #c2cda6; }
.ej-closing-sub {
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.7;
  color: rgba(244,240,232,.74);
  max-width: 52ch;
  margin: 0 auto clamp(32px, 3.4vw, 46px);
}
.ej-closing .cta { margin-inline: auto; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
  .ej-ethos-grid { grid-template-columns: 1fr; gap: 30px; }
  .ej-bbt-grid { grid-template-columns: 1fr; gap: 40px; }
  .ej-adv-grid { grid-template-columns: 1fr; gap: 34px; }
  .ej-assess-list { grid-template-columns: repeat(2, 1fr); }
  .ej-step { gap: clamp(22px, 3vw, 44px); }
}
@media (max-width: 720px) {
  .ej-step { grid-template-columns: 1fr; gap: clamp(20px, 5vw, 28px); padding: 32px 0; }
  .ej-step:nth-child(even) .ej-step-content { order: 0; }      /* reset alternation */
  .ej-step-media image-slot { min-height: 220px; }
  .ej-bbt-nodes { grid-template-columns: 1fr; }
  .ej-provide li { flex-direction: column; gap: 6px; }
  .ej-provide .ej-provide-k { width: auto; }
}
@media (max-width: 460px) {
  .ej-assess-list { grid-template-columns: 1fr; }
}