/* EvidencePilot Science — deep-time cinematic narrative, v2 */

.ep-hero.ep-container {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  height: clamp(720px, calc(100svh - var(--ep-header-height)), 900px);
  margin: 0;
  padding: 0 max(var(--ep-gutter), calc((100vw - 1312px) / 2));
  display: flex;
  align-items: center;
  overflow: hidden;
  text-align: left;
  background: #17211f;
}

.ep-hero.ep-container::before {
  z-index: 1;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(10, 18, 17, .88) 0%, rgba(10, 18, 17, .69) 35%, rgba(10, 18, 17, .22) 64%, rgba(10, 18, 17, .08) 100%),
    linear-gradient(180deg, rgba(8, 15, 14, .28), transparent 28%, transparent 69%, rgba(8, 15, 14, .48));
  transform: none;
}

.ep-hero.ep-container::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: .18;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .28) 0 .55px, transparent .75px);
  background-size: 4px 4px;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.ep-hero .ep-hero-copy {
  z-index: 3;
  width: min(650px, 58vw);
  margin: 0;
}

.ep-hero .ep-eyebrow {
  color: #e3c999;
}

.ep-hero h1 {
  color: #f7f2e8;
  font-size: clamp(62px, 5.6vw, 82px);
  line-height: .96;
  text-shadow: 0 12px 42px rgba(0, 0, 0, .42);
}

.ep-hero .ep-hero-lead {
  max-width: 630px;
  margin: 28px 0 0;
  color: rgba(246, 242, 233, .82);
  font-size: clamp(18px, 1.45vw, 21px);
  text-shadow: 0 4px 20px rgba(0, 0, 0, .42);
}

.ep-hero .ep-hero-actions {
  justify-content: flex-start;
}

.ep-hero .ep-soft-button {
  border-color: rgba(246, 242, 233, .48);
  background: rgba(10, 18, 16, .26);
  color: #f7f2e8;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ep-hero .ep-soft-button:hover {
  border-color: rgba(246, 242, 233, .78);
  background: rgba(246, 242, 233, .14);
}

.ep-hero .ep-video-shell {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #17211f;
  box-shadow: none;
}

.ep-hero .ep-video-shell::before {
  z-index: 1;
  border-radius: 0;
  box-shadow: inset 0 -100px 120px rgba(5, 11, 10, .26);
}

.ep-hero .ep-video-blank {
  background: #17211f;
}

.ep-hero-backdrop-picture {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ep-hero-backdrop {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 52%;
}

.ep-hero .ep-video-blank::before,
.ep-hero .ep-video-blank::after {
  z-index: 1;
}

.ep-hero .ep-video-blank::before {
  opacity: .12;
}

.ep-hero .ep-video-blank::after,
.ep-hero .ep-atom-canvas {
  opacity: .05;
}

.ep-hero .ep-play-button {
  position: absolute;
  z-index: 3;
  right: max(var(--ep-gutter), calc((100vw - 1312px) / 2));
  bottom: 54px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(7, 14, 13, .46);
}

.ep-hero .ep-play-button::after {
  content: "DEEP TIME 01";
  top: 50%;
  right: calc(100% + 20px);
  left: auto;
  color: rgba(247, 242, 232, .74);
  transform: translateY(-50%);
}

.ep-helix-card img:not([src]) {
  visibility: hidden;
}

.ep-era-marker {
  position: absolute;
  z-index: 4;
  display: grid;
  grid-template-columns: 46px auto;
  grid-template-rows: auto auto;
  gap: 2px 13px;
  margin: 0;
  color: #f6f1e7;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .72));
}

.ep-era-marker::before {
  content: attr(data-index);
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(236, 211, 164, .62);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ecd3a4;
  font-family: var(--ep-display);
  font-size: 16px;
  letter-spacing: 0;
}

.ep-era-marker b {
  align-self: end;
  color: #ecd3a4;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: 1.25;
  text-transform: none;
  white-space: nowrap;
}

.ep-era-marker span {
  color: rgba(246, 241, 231, .94);
  font-size: 11px;
  line-height: 1.3;
  text-transform: none;
  white-space: nowrap;
}

.ep-hero > .ep-era-marker {
  left: max(var(--ep-gutter), calc((100vw - 1312px) / 2));
  bottom: 48px;
}

.ep-product {
  padding: 118px 0 0;
}

.ep-product > .ep-section-heading {
  margin-bottom: 92px;
}

.ep-product article.ep-pillar.ep-container {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  min-height: 790px;
  margin: 0;
  padding: 126px max(var(--ep-gutter), calc((100vw - 1312px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 859px) minmax(330px, 405px);
  grid-template-areas: "demo copy";
  gap: 48px;
  align-items: stretch;
  overflow: hidden;
  background-color: #20312d;
}

.ep-scene-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
}

.ep-scene-backdrop.is-loaded {
  opacity: 1;
}

.ep-product article.ep-pillar-peach > .ep-scene-backdrop {
  object-position: center 54%;
}

.ep-product article.ep-pillar-mint > .ep-scene-backdrop {
  object-position: center 58%;
}

.ep-product article.ep-pillar-lavender > .ep-scene-backdrop {
  object-position: center 52%;
}

.ep-product article.ep-pillar::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 10, 9, .10), transparent 25%, transparent 72%, rgba(4, 10, 9, .30)),
    linear-gradient(90deg, transparent 0 49%, rgba(244, 240, 231, .08) 60%, rgba(244, 240, 231, .20) 100%);
  pointer-events: none;
}

.ep-product article.ep-pillar > .ep-era-marker {
  top: 42px;
  left: max(var(--ep-gutter), calc((100vw - 1312px) / 2));
}

.ep-product article.ep-pillar > .ep-pillar-demo,
.ep-product article.ep-pillar > .ep-pillar-copy {
  position: relative;
  z-index: 2;
}

.ep-product article.ep-pillar > .ep-pillar-demo {
  grid-area: demo;
  height: 538px;
  border-color: rgba(242, 229, 202, .30);
  background: rgba(5, 12, 11, .14);
  box-shadow: 0 30px 85px rgba(2, 8, 7, .28);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ep-product article.ep-pillar > .ep-pillar-demo::before {
  opacity: .18;
  background: linear-gradient(125deg, rgba(255, 255, 255, .18), transparent 42%);
  mask-image: none;
}

.ep-product article.ep-pillar > .ep-pillar-copy {
  grid-area: copy;
  min-width: 0;
  padding: 42px 38px;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  background: rgba(249, 246, 239, .94);
  box-shadow: 0 28px 80px rgba(4, 10, 9, .22);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ep-product article.ep-pillar .ep-pillar-copy h3 {
  margin-top: 0;
}

.ep-product article.ep-pillar .ep-pillar-copy > p {
  margin-bottom: 26px;
}

.ep-product article.ep-pillar .ep-accordion {
  margin-top: auto;
}

.ep-product article.ep-pillar .ep-accordion details.is-opened {
  background: rgba(255, 253, 248, .76);
}

.ep-product .ep-pillar-peach .ep-pillar-demo,
.ep-product .ep-pillar-mint .ep-pillar-demo,
.ep-product .ep-pillar-lavender .ep-pillar-demo {
  background-image: none;
}

.ep-workflows {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #eaf0eb;
}

.ep-workflows::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(234, 240, 235, .98) 0%, rgba(234, 240, 235, .84) 32%, rgba(234, 240, 235, .95) 100%);
  pointer-events: none;
}

.ep-workflows-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 44%;
  opacity: 0;
  transition: opacity .5s ease;
}

.ep-workflows-backdrop.is-loaded {
  opacity: .20;
}

.ep-workflows > .ep-container {
  position: relative;
  z-index: 2;
}

.ep-workflow-visual {
  background-color: #13211e;
  background-image: none !important;
}

.ep-workflow-visual::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 14, 13, .08), rgba(4, 10, 9, .48));
  pointer-events: none;
}

.ep-workflow-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
}

.ep-workflow-backdrop.is-loaded {
  opacity: 1;
}

.ep-workflow-visual > span,
.ep-workflow-visual > i,
.ep-workflow-visual > strong,
.ep-workflow-visual > b {
  position: relative;
  z-index: 2;
}

.ep-workflow-visual::after {
  z-index: 2;
}

#ep-panel-singlecell .ep-workflow-backdrop {
  object-position: center 52%;
}

#ep-panel-evolution .ep-workflow-backdrop {
  object-position: center 52%;
}

#ep-panel-protein .ep-workflow-backdrop {
  object-position: center 58%;
}

#ep-panel-cheminformatics .ep-workflow-backdrop {
  object-position: center 54%;
}

@media (max-width: 1180px) {
  .ep-product article.ep-pillar.ep-container {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr);
    gap: 36px;
  }

  .ep-product article.ep-pillar > .ep-pillar-copy {
    padding: 34px 30px;
  }
}

@media (max-width: 991px) {
  .ep-hero.ep-container {
    height: 760px;
    min-height: 760px;
    padding-top: 62px;
  }

  .ep-hero .ep-hero-copy {
    width: min(620px, 75vw);
  }

  .ep-product article.ep-pillar.ep-container {
    min-height: 0;
    padding-top: 116px;
    padding-bottom: 96px;
    grid-template-columns: 1fr;
    grid-template-areas: "demo" "copy";
    gap: 28px;
  }

  .ep-product article.ep-pillar > .ep-pillar-demo {
    width: 100%;
    height: 440px;
  }

  .ep-product article.ep-pillar > .ep-pillar-copy {
    width: 100%;
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .ep-hero.ep-container {
    height: 760px;
    min-height: 760px;
    padding: 106px var(--ep-gutter) 126px;
    align-items: flex-start;
  }

  .ep-hero.ep-container::before {
    background:
      linear-gradient(180deg, rgba(7, 14, 13, .74) 0%, rgba(7, 14, 13, .54) 48%, rgba(7, 14, 13, .34) 74%, rgba(7, 14, 13, .64) 100%),
      linear-gradient(90deg, rgba(7, 14, 13, .58), rgba(7, 14, 13, .08));
  }

  .ep-hero .ep-hero-copy {
    width: 100%;
  }

  .ep-hero h1 {
    font-size: clamp(43px, 12.4vw, 52px);
  }

  .ep-hero .ep-hero-lead {
    margin-top: 22px;
    font-size: 16px;
    line-height: 1.62;
  }

  .ep-hero .ep-hero-actions {
    margin-top: 22px;
  }

  .ep-hero-backdrop {
    object-position: 58% center;
  }

  .ep-hero .ep-play-button {
    right: var(--ep-gutter);
    bottom: 30px;
    width: 54px;
    height: 54px;
  }

  .ep-hero .ep-play-button::after {
    content: "01";
    right: calc(100% + 12px);
  }

  .ep-hero > .ep-era-marker {
    left: var(--ep-gutter);
    bottom: 76px;
  }

  .ep-era-marker {
    grid-template-columns: 38px auto;
  }

  .ep-era-marker::before {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .ep-product {
    padding-top: 86px;
  }

  .ep-product > .ep-section-heading {
    margin-bottom: 70px;
  }

  .ep-product article.ep-pillar.ep-container {
    width: 100%;
    margin: 0;
    padding: 104px var(--ep-gutter) 82px;
    gap: 22px;
  }

  .ep-product article.ep-pillar::before {
    background:
      linear-gradient(180deg, rgba(4, 10, 9, .18), rgba(4, 10, 9, .04) 32%, rgba(4, 10, 9, .26) 100%),
      linear-gradient(90deg, transparent, rgba(244, 240, 231, .10));
  }

  .ep-product article.ep-pillar > .ep-era-marker {
    top: 30px;
    left: var(--ep-gutter);
  }

  .ep-product article.ep-pillar-peach > .ep-scene-backdrop {
    object-position: 45% center;
  }

  .ep-product article.ep-pillar-mint > .ep-scene-backdrop {
    object-position: 42% center;
  }

  .ep-product article.ep-pillar-lavender > .ep-scene-backdrop {
    object-position: 36% center;
  }

  .ep-product article.ep-pillar > .ep-pillar-demo {
    height: 263px;
    padding: 16px;
  }

  .ep-product article.ep-pillar > .ep-pillar-copy {
    padding: 26px 22px 22px;
    border-radius: 20px;
    background: rgba(249, 246, 239, .92);
  }

  .ep-product article.ep-pillar .ep-pillar-copy > p {
    margin-bottom: 10px;
  }

  .ep-product article.ep-pillar .ep-accordion {
    margin-top: 26px;
  }

  .ep-workflows {
    background-position: 36% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ep-hero .ep-video-blank,
  .ep-product article.ep-pillar,
  .ep-workflows {
    background-attachment: scroll;
  }
}

@media print {
  .ep-hero.ep-container,
  .ep-product article.ep-pillar.ep-container,
  .ep-workflows {
    background: #fff !important;
    color: #111 !important;
  }

  .ep-hero h1,
  .ep-hero .ep-hero-lead,
  .ep-hero .ep-eyebrow {
    color: #111 !important;
    text-shadow: none !important;
  }

  .ep-era-marker,
  .ep-hero .ep-video-shell {
    display: none !important;
  }
}