/* September 2026 content update: photographic hero and company principles. */
.hero-slideshow{position:absolute;inset:0;background:#170d19;overflow:hidden}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;opacity:0;transform:scale(1.01);animation:heroCrossfade 45s ease-in-out infinite;will-change:opacity,transform;filter:brightness(1.015) saturate(1.02)}
.hero-slide-team{opacity:1;object-position:center 57%}
.hero-slide-facility{animation-delay:-30s;object-position:center 57%}
.hero-slide-biosecurity{animation-delay:-15s;object-position:center 47%}
.hero-overlay{background:linear-gradient(90deg,rgba(13,7,15,.84) 0%,rgba(13,7,15,.58) 42%,rgba(13,7,15,.2) 100%),linear-gradient(0deg,rgba(13,7,15,.74) 0%,rgba(13,7,15,.08) 48%,rgba(13,7,15,.16) 100%)}
@keyframes heroCrossfade{0%,28%{opacity:1;transform:scale(1.01)}33.333%,95%{opacity:0;transform:scale(1.035)}100%{opacity:1;transform:scale(1.01)}}

.principles{position:relative;overflow:hidden;background:#211126;color:#fff}
.principles:before{content:"V";position:absolute;right:-.06em;top:-.28em;color:rgba(216,174,224,.045);font:600 min(62vw,54rem)/1 var(--display);letter-spacing:-.12em;pointer-events:none}
.principles-layout{position:relative;z-index:1;margin-top:66px}
.principle-number{display:block;margin-bottom:26px;color:rgba(255,255,255,.5);font-size:.68rem;font-weight:650;letter-spacing:.13em;text-transform:uppercase}
.principle-vision{padding:0 0 70px;border-bottom:1px solid rgba(255,255,255,.17)}
.principle-vision p{max-width:1000px;margin:0;font:480 clamp(2.6rem,5.8vw,6.1rem)/.98 var(--display);letter-spacing:-.07em}
.principles em{color:var(--lilac);font-style:normal}
.principles-lower{display:grid;grid-template-columns:.72fr 1.28fr;border-bottom:1px solid rgba(255,255,255,.17)}
.principle-mission,.principle-values{padding:48px 0 12px}
.principle-mission{padding-right:7vw;border-right:1px solid rgba(255,255,255,.17)}
.principle-mission p{margin:60px 0 24px;font:500 clamp(2.35rem,4.6vw,4.8rem)/.98 var(--display);letter-spacing:-.065em}
.principle-values{padding-left:7vw}
.principle-values ol{margin:0;padding:0;list-style:none}
.principle-values li{display:grid;grid-template-columns:48px 1fr;align-items:center;min-height:86px;border-top:1px solid rgba(255,255,255,.14)}
.principle-values li:first-child{border-top:0}
.principle-values li span{color:var(--lime);font-size:.67rem}
.principle-values li b{font:500 clamp(1.35rem,2.4vw,2.1rem)/1.12 var(--display);letter-spacing:-.04em}

.quote.long blockquote{font-size:clamp(1.38rem,2.2vw,2rem);line-height:1.34;letter-spacing:-.027em}
.story-stack{height:470px}

@media(max-width:900px){
  .hero-slide-team{object-position:center 54%}
  .hero-slide-facility{object-position:51% center}
  .hero-slide-biosecurity{object-position:52% center}
  .principles-lower{grid-template-columns:1fr}
  .principle-mission{padding-right:0;border-right:0;border-bottom:1px solid rgba(255,255,255,.17)}
  .principle-values{padding-left:0}
}
@media(max-width:600px){
  .hero-slide-team{object-position:center 52%}
  .hero-slide-facility{object-position:49% center}
  .hero-slide-biosecurity{object-position:54% center}
  .hero-overlay{background:linear-gradient(180deg,rgba(13,7,15,.74) 0%,rgba(13,7,15,.42) 52%,rgba(13,7,15,.88) 100%),linear-gradient(90deg,rgba(13,7,15,.48) 0%,rgba(13,7,15,.15) 100%)}
  .principles-layout{margin-top:46px}
  .principle-vision{padding-bottom:48px}
  .principle-vision p{font-size:clamp(2.65rem,13vw,4rem)}
  .principle-mission,.principle-values{padding-top:38px}
  .principle-mission p{margin-top:44px}
  .principle-values li{min-height:76px}
  .story-stack{height:520px}
  .quote.long blockquote{font-size:clamp(1.16rem,5.1vw,1.48rem);line-height:1.42}
}
@media(max-width:430px){.story-stack{height:590px}}
@media(prefers-reduced-motion:reduce){
  .hero-slide{animation:none;transform:none;opacity:0}
  .hero-slide-team{opacity:1}
}

/* Technical animal stage: subtle grid with a rotating Biotin lime signal. */
.stage-visual{
  background:
    radial-gradient(circle at 50% 48%,rgba(216,174,224,.30),transparent 46%),
    linear-gradient(145deg,#581460 0%,#351039 56%,#211026 100%);
}
.stage-visual:before{
  inset:0;
  width:auto;
  height:auto;
  z-index:0;
  border-radius:0;
  background-color:transparent;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(circle at center,#000 22%,rgba(0,0,0,.82) 58%,transparent 96%);
  mask-image:radial-gradient(circle at center,#000 22%,rgba(0,0,0,.82) 58%,transparent 96%);
  filter:none;
  opacity:1;
  transform:none;
  animation:none;
}
.stage-visual:after{
  content:"";
  position:absolute;
  z-index:1;
  left:14%;
  right:14%;
  bottom:9%;
  height:13%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(8,2,10,.44),transparent 70%);
  filter:blur(13px);
}
.stage-orbit{
  display:block;
  position:absolute;
  z-index:1;
  width:min(72%,430px);
  aspect-ratio:1;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  animation:orbit 18s linear infinite;
}
.stage-orbit:after{
  content:"";
  position:absolute;
  width:11px;
  height:11px;
  top:11.5%;
  left:11.5%;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 0 6px rgba(215,242,120,.08),0 0 28px 8px rgba(215,242,120,.58);
}
.animal-image.animal-layers{width:88%;height:78%}
@media(max-width:600px){
  .stage-visual:before{background-size:42px 42px}
  .stage-orbit{width:min(76%,300px)}
  .animal-image.animal-layers{width:94%;height:80%}
}
@media(prefers-reduced-motion:reduce){.stage-orbit{animation:none}}