.banner-media-frame {
  position: relative;
  height: clamp(300px, 56.28vw, 620px);
  min-height: 300px;
  background:
    radial-gradient(circle at 72% 25%, rgba(0, 219, 233, .13), transparent 28rem),
    linear-gradient(135deg, #eef8ff 0%, #f7fbff 52%, #eefcff 100%);
}

.banner-media-frame [data-banner-track],
.banner-media-frame [data-banner-panel] {
  height: 100%;
}

.banner-media-frame [data-banner-panel] {
  background: linear-gradient(135deg, #eff8ff, #f8fcff);
}

.banner-media-frame [data-banner-panel] img,
.banner-media-frame [data-banner-panel] video {
  display: block;
  height: 100% !important;
  width: 100%;
  object-fit: contain;
}

.banner-media-frame [data-banner-panel] video {
  background: #061a35;
}

.deferred-media {
  background:
    radial-gradient(circle at 70% 22%, rgba(0, 219, 233, .12), transparent 18rem),
    linear-gradient(135deg, #f2f9ff, #eaf8fb);
}

@media (max-width: 1023px) {
  #shader-canvas-ANIMATION_2 {
    display: none !important;
  }

  .connected-hero {
    background:
      radial-gradient(circle at 18% 8%, rgba(0, 219, 233, .16), transparent 22rem),
      radial-gradient(circle at 88% 22%, rgba(0, 98, 255, .18), transparent 24rem),
      linear-gradient(155deg, #06152d 0%, #0a2b55 56%, #04152d 100%) !important;
  }
}

.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

html.reveal-enhanced .reveal:not(.active),
html.reveal-enhanced .reveal.active,
html.fast-scroll-safe .reveal,
html.ios-paint-safe .reveal,
html.ios-paint-safe.reveal-enhanced .reveal,
html.ios-paint-safe.reveal-enhanced .reveal:not(.active),
html.ios-paint-safe .reveal:not(.active),
html.ios-paint-safe .reveal.active {
  opacity: 1;
  transform: none;
  transition: none;
}

html.ios-paint-safe [data-perf-region],
html.ios-paint-safe [data-perf-region]::before,
html.ios-paint-safe [data-perf-region]::after,
html.ios-paint-safe [data-perf-region] *,
html.ios-paint-safe [data-perf-region] *::before,
html.ios-paint-safe [data-perf-region] *::after {
  animation-play-state: running !important;
}

#visual-story video,
#contact iframe {
  background-color: #f2f8ff;
}

.v2-image-panel,
.formula-visual,
.platform-visual {
  contain: layout paint;
}

.v2-image-panel,
.formula-visual,
.platform-visual {
  aspect-ratio: 4 / 5;
}

#visual-story video {
  background:
    radial-gradient(circle at 58% 45%, rgba(0, 219, 233, .14), transparent 18rem),
    #061a35;
}

#contact iframe {
  aspect-ratio: 16 / 10;
}

#nav-shell,
#nav-shell.is-scrolled {
  transform: none !important;
}

#nav-shell.is-scrolled {
  background: rgba(255, 255, 255, .72) !important;
  border-color: rgba(255, 255, 255, .55) !important;
  box-shadow: 0 20px 70px -55px rgba(0, 76, 237, .32) !important;
}

.contact-fixed-bg,
.contact-fixed-bg.contact-media-ready,
.contact-fixed-bg.is-scrolling {
  background-image: url("../optimized/images/biology-1280.webp") !important;
  background-attachment: scroll !important;
  background-position: center center !important;
  background-size: cover !important;
  animation: none !important;
}

@media (max-width: 1023px) {
  .contact-fixed-bg,
  .contact-fixed-bg.contact-media-ready,
  .contact-fixed-bg.is-scrolling {
    background-image: url("../optimized/images/biology-960.webp") !important;
  }
}

@media (max-width: 480px) {
  .contact-fixed-bg,
  .contact-fixed-bg.contact-media-ready,
  .contact-fixed-bg.is-scrolling {
    background-image: url("../optimized/images/biology-640.webp") !important;
  }
}

.contact-fixed-bg .contact-atmosphere::before,
.contact-fixed-bg .contact-atmosphere::after,
.contact-fixed-bg.is-scrolling .contact-atmosphere::before,
.contact-fixed-bg.is-scrolling .contact-atmosphere::after {
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}

.contact-fixed-bg .contact-atmosphere::before,
.contact-fixed-bg.is-scrolling .contact-atmosphere::before {
  opacity: .68 !important;
  transform: none !important;
}

.contact-fixed-bg .contact-atmosphere::after,
.contact-fixed-bg.is-scrolling .contact-atmosphere::after {
  opacity: .18 !important;
  transform: translate3d(-4%, 0, 0) rotate(-1deg) scale(1.05) !important;
}

.molecule-lab {
  isolation: isolate;
}

.molecule-path-stage {
  position: absolute;
  inset: 12% 4.5% 25%;
  z-index: 1;
  opacity: .98;
  pointer-events: none;
}

.molecule-path-visual {
  display: block;
  height: 100%;
  width: 100%;
  overflow: visible;
}

.molecule-path-orbits ellipse {
  fill: none;
  stroke: rgba(0, 219, 233, .13);
  stroke-width: 1.5;
}

.molecule-path-orbits ellipse:nth-child(1) {
  stroke: rgba(118, 156, 255, .14);
}

.molecule-path-orbits ellipse:nth-child(2) {
  stroke: rgba(0, 219, 233, .16);
  transform: rotate(-8deg);
  transform-origin: 500px 302px;
}

.molecule-path-orbits ellipse:nth-child(3) {
  stroke: rgba(118, 156, 255, .12);
}

.molecule-native-path,
.molecule-peptide-path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.molecule-native-path {
  stroke: url("#moleculeNativeGradient");
  stroke-width: 5;
  stroke-linecap: round;
  opacity: .86;
}

.molecule-peptide-path {
  stroke: url("#moleculePeptideGradient");
  stroke-width: 3.25;
  stroke-linecap: round;
  stroke-dasharray: 38 16;
  opacity: .62;
}

.molecule-peptide-path-soft {
  opacity: .42;
  stroke-dasharray: 26 18;
}

.molecule-path-beads circle {
  transform-box: fill-box;
  transform-origin: center;
}

.molecule-path-beads-native circle {
  fill: url("#moleculeBeadGradient");
}

.molecule-path-beads-peptide circle {
  fill: url("#moleculePeptideBeadGradient");
}

.molecule-lab > .absolute {
  z-index: 3;
}

@media (min-width: 768px) {
  .banner-media-frame {
    height: 620px;
    min-height: 620px;
  }

  .banner-media-frame [data-banner-panel] img,
  .banner-media-frame [data-banner-panel] video {
    object-fit: cover;
  }
}

@media (max-width: 767px) {
  .molecule-path-stage {
    inset: 16% 4% 27%;
  }

  .banner-media-frame {
    height: auto;
    min-height: 0;
    aspect-ratio: 1672 / 941;
  }

  #feature-banners [data-banner-panel] img,
  #feature-banners [data-banner-panel] video {
    height: 100% !important;
    object-fit: contain !important;
  }
}

html.ios-paint-safe {
  scroll-behavior: auto;
}

html.ios-paint-safe body {
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 767px) {
  html.ios-paint-safe .connected-hero {
    align-items: flex-start !important;
    min-height: auto !important;
    padding-top: max(8rem, calc(env(safe-area-inset-top) + 7.25rem)) !important;
    padding-bottom: 4.75rem !important;
  }

  html.ios-paint-safe #feature-banners {
    padding-top: 3rem !important;
    padding-bottom: 3.25rem !important;
  }

  html.ios-paint-safe .banner-media-frame {
    aspect-ratio: 1672 / 941 !important;
    height: auto !important;
    min-height: clamp(218px, 54vw, 285px) !important;
    max-height: 300px !important;
    overflow: hidden !important;
  }

  html.ios-paint-safe .banner-media-frame [data-banner-track],
  html.ios-paint-safe .banner-media-frame [data-banner-panel] {
    min-height: inherit !important;
  }

  html.ios-paint-safe .banner-media-frame [data-banner-panel] img,
  html.ios-paint-safe .banner-media-frame [data-banner-panel] video {
    display: block !important;
    height: 100% !important;
    min-height: inherit !important;
    object-fit: contain !important;
    transform: none !important;
  }

  html.ios-paint-safe .v2-image-panel,
  html.ios-paint-safe .formula-visual,
  html.ios-paint-safe .platform-visual {
    contain: none !important;
    min-height: 440px !important;
  }

  html.ios-paint-safe .molecule-lab {
    contain: none !important;
    min-height: 500px !important;
  }

  html.ios-paint-safe #visual-story video {
    aspect-ratio: 16 / 9 !important;
    min-height: 220px !important;
  }

  html.ios-paint-safe #contact iframe {
    aspect-ratio: 16 / 11 !important;
    min-height: 280px !important;
  }

  html.ios-paint-safe .deferred-media {
    background-color: #eef8ff !important;
  }
}

@media (max-width: 767px) {
  html.ios-paint-safe #main-nav,
  html.ios-paint-safe #nav-shell {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-transform: none !important;
    transform: none !important;
  }

  html.ios-paint-safe main,
  html.ios-paint-safe main section,
  html.ios-paint-safe main section > *,
  html.ios-paint-safe footer {
    contain: none !important;
    content-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    transform-style: flat !important;
  }

  html.ios-paint-safe main section *,
  html.ios-paint-safe footer * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    contain: none !important;
    will-change: auto !important;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    transform-style: flat !important;
  }

  html.ios-paint-safe main section,
  html.ios-paint-safe main section > div,
  html.ios-paint-safe main article,
  html.ios-paint-safe main a,
  html.ios-paint-safe main img,
  html.ios-paint-safe main video,
  html.ios-paint-safe footer,
  html.ios-paint-safe footer > div {
    visibility: visible !important;
  }

  html.ios-paint-safe .hero-product-route,
  html.ios-paint-safe .hero-mobile-proof,
  html.ios-paint-safe .v2-fact-card,
  html.ios-paint-safe .product-route,
  html.ios-paint-safe .section-connection,
  html.ios-paint-safe .ecosystem-card,
  html.ios-paint-safe .document-tile,
  html.ios-paint-safe .blog-card,
  html.ios-paint-safe .certificate-card,
  html.ios-paint-safe .quality-route article {
    opacity: 1 !important;
    visibility: visible !important;
  }

  html.ios-paint-safe .hero-product-route,
  html.ios-paint-safe .hero-mobile-proof {
    background: rgba(7, 32, 63, .88) !important;
  }

  html.ios-paint-safe .text-gradient {
    -webkit-text-fill-color: currentColor;
    color: #00dbe9 !important;
    background: none !important;
  }
}