/* ============================================================
   BioStack.life — Homepage styles
   ============================================================ */

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--dark);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video, .hero__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(16,12,11,0.55) 0%, rgba(16,12,11,0.15) 32%, rgba(16,12,11,0.35) 62%, rgba(16,12,11,0.9) 100%),
    linear-gradient(90deg, rgba(16,12,11,0.7) 0%, rgba(16,12,11,0.1) 55%, rgba(16,12,11,0.0) 100%);
}
.hero__flow { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .5; mix-blend-mode: screen; }
.hero__inner { position: relative; z-index: 3; width: 100%; padding-bottom: clamp(40px, 6vw, 72px); padding-top: 120px; }
.hero__eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--venture-primary-tint); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px;
}
.hero__eyebrow::before { content:""; width: 30px; height: 1px; background: var(--venture-primary-tint); }
.hero__title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 6.2rem); line-height: 0.98; letter-spacing: -0.035em;
  color: var(--paper-on-dark); max-width: 15ch;
}
.hero__title em { font-style: normal; color: var(--venture-primary-tint); }
.hero__copy { color: rgba(234,241,242,0.86); font-size: clamp(1.05rem, 1.7vw, 1.32rem); line-height: 1.55; max-width: 56ch; margin-top: 28px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero__strip {
  margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--line-on-dark);
  display: flex; flex-wrap: wrap; gap: 10px 0; align-items: center;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(234,241,242,0.72);
}
.hero__strip span { display: inline-flex; align-items: center; }
.hero__strip span:not(:last-child)::after { content: "·"; margin: 0 14px; color: var(--burgundy-2); }
.hero__scroll {
  position: absolute; right: var(--gutter); bottom: clamp(40px,6vw,72px); z-index: 3;
  writing-mode: vertical-rl; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(234,241,242,0.6); display: flex; align-items: center; gap: 14px;
}
.hero__scroll::after { content:""; width: 1px; height: 46px; background: linear-gradient(rgba(234,241,242,0.5), transparent); animation: scrolldrop 2.4s var(--ease) infinite; }
@keyframes scrolldrop { 0%{transform:scaleY(0);transform-origin:top;} 45%{transform:scaleY(1);transform-origin:top;} 55%{transform:scaleY(1);transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }
@media (max-width: 700px) { .hero__scroll { display: none; } }

/* ---------- PLATFORM PATHWAY ---------- */
.platform { background: var(--paper); }
.platform__head { max-width: var(--maxw); }
.pathway { margin-top: clamp(44px, 6vw, 72px); }
.pathway__rail { position: relative; }
.pathway__line { position: absolute; left: 0; right: 0; top: 26px; height: 1px; background: var(--line-2); }
.pathway__line::after { content:""; position: absolute; left: 0; top: 0; height: 100%; width: var(--flow, 0%); background: var(--burgundy); transition: width 1.4s var(--ease-out); }
.pathway__steps {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
}
.pstep { position: relative; padding-right: 22px; }
.pstep__node {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--ink);
  position: relative; z-index: 2; margin-bottom: 26px; margin-top: 20px;
  transition: background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.pstep.lit .pstep__node { background: var(--burgundy); border-color: var(--burgundy); transform: scale(1.15); }
.pstep__num { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-3); }
.pstep__name { font-family: var(--display); font-size: clamp(1.05rem, 1.7vw, 1.4rem); font-weight: 500; letter-spacing: -0.01em; margin: 6px 0 10px; }
.pstep__desc { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 22ch; }
@media (max-width: 900px) {
  .pathway__steps { grid-template-columns: 1fr; gap: 0; }
  .pathway__line { left: 6px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .pathway__line::after { width: 100%; height: var(--flow,0%); }
  .pstep { padding-left: 34px; padding-right: 0; padding-bottom: 28px; }
  .pstep__node { position: absolute; left: 0; top: 4px; margin: 0; }
  .pstep__desc { max-width: 46ch; }
}

/* ---------- CAPABILITIES ---------- */
.caps__head { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: end; }
.caps__intro { font-size: 15px; color: var(--ink-2); max-width: 40ch; }
.caps__grid { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.cap {
  display: grid; grid-template-columns: 52px 1.1fr 1.6fr auto; gap: 28px; align-items: baseline;
  padding: 34px 0; border-bottom: 1px solid var(--line);
  transition: background .4s var(--ease);
}
.cap:hover { background: var(--venture-primary-light); }
.cap__idx { font-family: var(--mono); font-size: 13px; color: var(--burgundy); }
.cap__title { font-family: var(--display); font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 500; letter-spacing: -0.015em; }
.cap__short { font-size: 14px; color: var(--ink-3); margin-top: 8px; }
.cap__desc { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.cap__link { align-self: center; white-space: nowrap; }
@media (max-width: 900px) {
  .caps__head { grid-template-columns: 1fr; align-items: start; gap: 16px; }
  .cap { grid-template-columns: 40px 1fr; gap: 6px 18px; padding: 26px 0; }
  .cap__idx { grid-row: 1; }
  .cap__titlewrap { grid-column: 2; }
  .cap__desc { grid-column: 2; margin-top: 14px; }
  .cap__link { grid-column: 2; margin-top: 16px; align-self: start; }
}

/* ---------- IMMERSIVE CAPABILITY VIDEO ---------- */
.immersive { position: relative; height: clamp(360px, 60vh, 620px); overflow: hidden; background: var(--dark); }
.immersive video, .immersive img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.immersive__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,12,11,0.82) 0%, rgba(16,12,11,0.4) 45%, rgba(16,12,11,0.15) 100%); }
.immersive__inner { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; }
.immersive__text { max-width: 40ch; }
.immersive__quote {
  font-family: var(--display); font-weight: 500; letter-spacing: -0.025em;
  font-size: clamp(1.6rem, 3.4vw, 2.9rem); line-height: 1.08; color: var(--paper-on-dark);
}
.immersive__quote b { color: var(--venture-primary-tint); font-weight: 500; }
.immersive__label { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(234,241,242,0.6); margin-bottom: 20px; }

/* ---------- FOOTPRINT ---------- */
.footprint { background: var(--paper-2); }
.footprint__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 5vw, 72px); align-items: center; margin-top: clamp(36px,4vw,56px); }
.footprint__map { position: relative; }
.footprint__map svg { width: 100%; height: auto; }
.fp-node text { font-family: var(--mono); font-size: 12px; fill: var(--ink-2); letter-spacing: .04em; }
.fp-node circle { transition: r .4s var(--ease), fill .4s var(--ease); }
.fp-flow { fill: none; stroke: var(--burgundy); stroke-width: 1.2; opacity: .55; stroke-dasharray: 4 5; }
.fp-flow--mineral { stroke: var(--mineral); }
.footprint__benefits { display: flex; flex-direction: column; gap: 26px; }
.fp-benefit { padding-left: 22px; border-left: 2px solid var(--burgundy); }
.fp-benefit:nth-child(2) { border-color: var(--mineral); }
.fp-benefit:nth-child(3) { border-color: var(--teal); }
.fp-benefit h4 { font-family: var(--display); font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; }
.fp-benefit p { font-size: 14.5px; color: var(--ink-2); margin-top: 8px; max-width: 42ch; }
.footprint__cta { margin-top: 34px; }
.footprint__regions { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--ink-3); margin-top: 20px; text-transform: uppercase; }
@media (max-width: 860px) { .footprint__grid { grid-template-columns: 1fr; } }

/* ---------- HOW IT WORKS ---------- */
.process { background: var(--dark); color: var(--paper-on-dark); }
.process .eyebrow { color: var(--venture-primary-tint); }
.process .eyebrow::before { background: var(--venture-primary-tint); }
.process .headline { color: var(--paper-on-dark); }
.process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: clamp(44px,5vw,64px); background: var(--line-on-dark); border: 1px solid var(--line-on-dark); }
.pcard { background: var(--dark); padding: 32px 26px 40px; position: relative; transition: background .4s var(--ease); }
.pcard:hover { background: var(--dark-2); }
.pcard__num { font-family: var(--mono); font-size: 12px; color: var(--venture-primary-tint); letter-spacing: .1em; }
.pcard__title { font-family: var(--display); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; margin: 30px 0 14px; }
.pcard__desc { font-size: 14.5px; line-height: 1.55; color: rgba(234,241,242,0.72); }
.process__cta { margin-top: 40px; }
@media (max-width: 900px) { .process__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process__grid { grid-template-columns: 1fr; } }

/* ---------- PARTNERSHIPS ---------- */
.partners__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(40px,5vw,60px); }
.pmodel {
  border: 1px solid var(--line); background: var(--paper); padding: 32px 28px 30px;
  display: flex; flex-direction: column; min-height: 340px;
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pmodel:hover { border-color: var(--venture-primary); transform: translateY(-4px); box-shadow: 0 20px 44px rgba(11,45,58,0.10); }
.pmodel__tag { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--burgundy); }
.pmodel__title { font-family: var(--display); font-size: 1.45rem; font-weight: 500; letter-spacing: -0.015em; margin: 18px 0 14px; line-height: 1.1; }
.pmodel__desc { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.pmodel__cta { margin-top: auto; padding-top: 26px; }
@media (max-width: 900px) { .partners__grid { grid-template-columns: 1fr; } }

/* ---------- VITAEFORGE LINK ---------- */
.vf { background: var(--paper-3); }
.vf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,64px); align-items: center; }
.vf__diagram { display: flex; flex-direction: column; gap: 0; }
.vf-node { border: 1px solid var(--line-2); background: var(--paper); padding: 26px 28px; }
.vf-node--hq { border-color: var(--burgundy); position: relative; }
.vf-node__name { font-family: var(--display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.vf-node--hq .vf-node__name b { color: var(--burgundy); }
.vf-node__steps { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--ink-3); margin-top: 8px; text-transform: uppercase; }
.vf__conn { display: flex; align-items: center; justify-content: center; padding: 14px 0; color: var(--burgundy); }
.vf__conn svg { width: 24px; height: 40px; }
.vf__cta { margin-top: 32px; }
@media (max-width: 860px) { .vf__grid { grid-template-columns: 1fr; } }

/* ---------- OPERATING PRINCIPLES ---------- */
.principles__grid { margin-top: clamp(40px,5vw,60px); border-top: 1px solid var(--line); }
.principle {
  display: grid; grid-template-columns: 60px 1fr; gap: 26px; align-items: center;
  padding: 26px 0; border-bottom: 1px solid var(--line);
  font-family: var(--display); font-size: clamp(1.25rem, 2.6vw, 1.9rem); font-weight: 500; letter-spacing: -0.02em;
  transition: padding-left .4s var(--ease), color .4s var(--ease);
}
.principle:hover { padding-left: 12px; color: var(--burgundy); }
.principle__idx { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--ink-3); letter-spacing: .05em; }
.principle:hover .principle__idx { color: var(--burgundy); }
@media (max-width: 620px) { .principle { grid-template-columns: 40px 1fr; gap: 14px; } }

/* ---------- BRIEFINGS (home) ---------- */
.briefs__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.briefs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(40px,5vw,56px); }
.brief-card {
  border-top: 2px solid var(--ink); padding-top: 22px; display: flex; flex-direction: column;
  min-height: 260px; cursor: pointer; transition: border-color .4s var(--ease);
  background: none; text-align: left;
}
.brief-card:hover { border-color: var(--burgundy); }
.brief-card__type { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--burgundy); }
.brief-card__title { font-family: var(--display); font-size: 1.32rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.14; margin: 16px 0 12px; }
.brief-card__excerpt { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.brief-card__foot { margin-top: auto; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; }
.brief-card__date { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.brief-card__read { font-size: 13px; font-weight: 500; color: var(--ink); display: inline-flex; gap: 6px; align-items: center; transition: color .3s; }
.brief-card:hover .brief-card__read { color: var(--burgundy); }
.briefs__all { margin-top: 40px; }
@media (max-width: 900px) { .briefs__grid { grid-template-columns: 1fr; } .brief-card { min-height: 0; } }

/* ---------- FINAL CTA ---------- */
.finalcta { background: var(--burgundy); color: var(--paper); position: relative; overflow: hidden; }
.finalcta__flow { position: absolute; inset: 0; opacity: .18; pointer-events: none; }
.finalcta .eyebrow { color: rgba(234,241,242,0.75); }
.finalcta .eyebrow::before { background: rgba(234,241,242,0.75); }
.finalcta__inner { position: relative; z-index: 2; }
.finalcta__title { font-family: var(--display); font-weight: 500; font-size: clamp(2.1rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 18ch; color: var(--paper); }
.finalcta__copy { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: rgba(234,241,242,0.9); max-width: 52ch; margin-top: 24px; }
.finalcta__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.finalcta .btn--primary { background: var(--paper); color: var(--burgundy); }
.finalcta .btn--primary:hover { background: var(--ink); color: var(--paper); }
.finalcta .btn--ghost { border-color: rgba(234,241,242,0.4); color: var(--paper); }
.finalcta .btn--ghost:hover { background: rgba(234,241,242,0.12); border-color: var(--paper); color: var(--paper); }
.finalcta__types { margin-top: 46px; padding-top: 26px; border-top: 1px solid rgba(234,241,242,0.25); display: flex; flex-wrap: wrap; gap: 10px 0; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(234,241,242,0.8); }
.finalcta__types span:not(:last-child)::after { content: "·"; margin: 0 12px; color: rgba(234,241,242,0.45); }

/* Section intro shared */
.sec-head { max-width: 62ch; }