/* Compound pages — black void, one hero, one name. DNA helix + capsule stay in assets/motion. */
.pep {
  --void: #050506;
  position: relative;
  min-height: 100vh;
  overflow: clip;
  background: #050506;
  color: #f5f8fc;
  scroll-margin-top: var(--nav-h);
}
.pep-hero,
.pep-vid {
  position: absolute;
  right: -6%;
  top: 0;
  bottom: 0;
  width: min(62vw, 72vh);
  height: 100%;
  object-fit: contain;
  object-position: center right;
  z-index: 2;
  pointer-events: none;
}
.pep-vid {
  display: none;
  z-index: 3;
}
.pep-vid.is-on { display: block; }
.pep:has(.pep-vid.is-on:not(.is-still)) .pep-hero { display: none; }
.pep:has(.pep-vid[data-loop-fade="1"].is-on) .pep-hero { display: block; }
.pep:has(.pep-vid.is-still[data-once="1"]) .pep-hero {
  display: block;
  z-index: 3;
}
.pep-vid.is-still {
  animation: pep-live 4.8s ease-in-out infinite;
}
.pep-vid.is-still[data-once="1"] {
  animation: none;
  opacity: 0;
}
@keyframes pep-live {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.11) saturate(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .pep-vid.is-still { animation: none; }
}
#klow .pep-hero,
#klow .pep-vid {
  inset: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transform-origin: 52% 26%;
}
#klow {
  perspective: 1400px;
}
#klow:not(.is-look) .pep-vid {
  transform: none;
}
#nad .pep-hero,
#nad .pep-vid,
#selank .pep-hero,
#selank .pep-vid,
#aod-9604 .pep-hero,
#aod-9604 .pep-vid,
#amino-1mq .pep-hero,
#amino-1mq .pep-vid,
#mots-c .pep-hero,
#mots-c .pep-vid,
#ss-31 .pep-hero,
#ss-31 .pep-vid,
.pep.is-still .pep-hero,
#slu-pp-332 .pep-hero,
#slu-pp-332 .pep-vid,
#tesamorelin .pep-hero,
#tesamorelin .pep-vid,
#oxytocin .pep-hero,
#oxytocin .pep-vid,
#adipotide .pep-hero,
#adipotide .pep-vid,
#ara-290 .pep-hero,
#ara-290 .pep-vid,
#aicar .pep-hero,
#aicar .pep-vid,
#kpv .pep-hero,
#kpv .pep-vid,
#retatrutide .pep-hero,
#retatrutide .pep-vid,
#ll-37 .pep-hero,
#ll-37 .pep-vid {
  inset: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}
#slu-pp-332 .pep-hero,
#slu-pp-332 .pep-vid {
  object-fit: cover;
  object-position: 64% 42%;
}
#oxytocin .pep-hero,
#oxytocin .pep-vid {
  object-fit: contain;
  object-position: center center;
}
#adipotide .pep-hero,
#adipotide .pep-vid {
  object-fit: cover;
  object-position: 78% 40%;
}
#ara-290 .pep-hero,
#ara-290 .pep-vid {
  object-fit: cover;
  object-position: 76% 38%;
}
#oxytocin .pep-hero,
#oxytocin .pep-vid,
#adipotide .pep-hero,
#adipotide .pep-vid,
#ara-290 .pep-hero,
#ara-290 .pep-vid {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 10%, #000 86%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 10%, #000 86%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.pep-vid.is-seam {
  opacity: 0;
}
.pep-vid[data-loop-fade="1"] {
  transition: opacity .42s ease;
}
#amino-1mq .pep-hero,
#amino-1mq .pep-vid {
  object-fit: contain;
  object-position: center center;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
#amino-1mq .pep-veil {
  background: linear-gradient(90deg, #050506 0%, rgba(5,5,6,.55) 22%, transparent 48%);
}
#amino-1mq .pep-type {
  margin-left: 0;
  max-width: min(28rem, 36vw);
  padding-left: max(var(--pad), 48px);
  padding-right: 4vw;
}
#amino-1mq .pep-lab {
  left: max(var(--pad), 32px);
  right: auto;
}
#mots-c .pep-hero,
#mots-c .pep-vid {
  object-fit: contain;
  object-position: center center;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
#mots-c .pep-veil {
  background: linear-gradient(90deg, #050506 0%, rgba(5,5,6,.52) 20%, transparent 46%);
}
#mots-c .pep-type {
  margin-left: 0;
  max-width: min(28rem, 36vw);
  padding-left: max(var(--pad), 48px);
  padding-right: 4vw;
}
#mots-c .pep-lab {
  left: max(var(--pad), 32px);
  right: auto;
}
#oxytocin .pep-veil {
  background: linear-gradient(90deg, #050506 0%, rgba(5,5,6,.5) 20%, transparent 46%);
}
#oxytocin .pep-type {
  margin-left: 0;
  max-width: min(28rem, 36vw);
  padding-left: max(var(--pad), 48px);
  padding-right: 4vw;
}
#oxytocin .pep-lab {
  left: max(var(--pad), 32px);
  right: auto;
}
#semax .pep-hero,
#semax .pep-vid {
  inset: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: translateX(8%);
}
#ghk-cu .pep-hero,
#ghk-cu .pep-vid {
  inset: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: none;
}
#klow .pep-veil,
#ghk-cu .pep-veil,
#semax .pep-veil,
#aod-9604 .pep-veil,
#nad .pep-veil,
#amino-1mq .pep-veil,
#mots-c .pep-veil,
#ss-31 .pep-veil,
.pep.is-still .pep-veil,
#selank .pep-veil,
#slu-pp-332 .pep-veil,
#tesamorelin .pep-veil,
#oxytocin .pep-veil,
#adipotide .pep-veil,
#ara-290 .pep-veil {
  background: linear-gradient(90deg, #050506 0%, rgba(5,5,6,.55) 24%, transparent 52%);
}
.pep-veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #050506 0%, rgba(5,5,6,.55) 28%, transparent 52%);
  pointer-events: none;
  z-index: 4;
}
.pep-type {
  position: relative;
  z-index: 5;
  max-width: min(46rem, calc(100% - 3rem));
  padding: 10vh max(var(--pad), 32px) 14vh;
  box-sizing: border-box;
}
.pep.is-copy-right .pep-hero,
.pep.is-copy-right .pep-vid {
  inset: 0 auto 0 0;
  width: 50%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 42% 22%;
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, #000 58%, rgba(0,0,0,.45) 82%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image:
    linear-gradient(90deg, #000 0%, #000 58%, rgba(0,0,0,.45) 82%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.pep.is-copy-right .pep-veil {
  background:
    linear-gradient(270deg, #050506 0%, #050506 38%, rgba(5,5,6,.72) 50%, rgba(5,5,6,.22) 62%, transparent 76%),
    linear-gradient(180deg, #050506 0%, transparent 14%, transparent 86%, #050506 100%);
}
.pep.is-copy-right .pep-type {
  margin-left: auto;
  max-width: min(28rem, 40vw);
  padding-left: 4vw;
  padding-right: max(var(--pad), 48px);
}
.pep.is-copy-right .pep-lab {
  left: auto;
  right: max(var(--pad), 32px);
}
#epithalon.is-copy-right .pep-hero,
#epithalon.is-copy-right .pep-vid {
  width: 68%;
  object-fit: cover;
  object-position: 32% 30%;
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, #000 62%, rgba(0,0,0,.55) 82%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image:
    linear-gradient(90deg, #000 0%, #000 62%, rgba(0,0,0,.55) 82%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
#epithalon.is-copy-right .pep-veil {
  background:
    linear-gradient(270deg, #050506 0%, #050506 28%, rgba(5,5,6,.45) 42%, rgba(5,5,6,.12) 56%, transparent 70%);
}
#igf1-lr3.is-copy-right .pep-hero,
#igf1-lr3.is-copy-right .pep-vid {
  object-position: 50% 16%;
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, #000 88%, rgba(0,0,0,.65) 96%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image:
    linear-gradient(90deg, #000 0%, #000 88%, rgba(0,0,0,.65) 96%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
#igf1-lr3.is-copy-right .pep-veil {
  background:
    linear-gradient(270deg, #050506 0%, rgba(5,5,6,.4) 18%, rgba(5,5,6,.1) 32%, transparent 48%);
}
#retatrutide .pep-hero,
#retatrutide .pep-vid {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 3%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 3%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
#retatrutide .pep-veil {
  background:
    linear-gradient(270deg, #050506 0%, rgba(5,5,6,.35) 22%, rgba(5,5,6,.08) 36%, transparent 52%);
}
#retatrutide .pep-type {
  position: absolute;
  top: calc(var(--nav-h) + 1.5rem);
  left: auto;
  right: max(5rem, 8vw);
  transform: none;
  margin: 0;
  max-width: min(24rem, 30vw);
  padding: 0;
}
#retatrutide .pep-n {
  margin-bottom: 4px;
  font-size: clamp(48px, 6.5vw, 88px);
  line-height: 1;
}
#retatrutide .pep-theses {
  max-width: 28ch;
}
#retatrutide .pep-lab {
  left: auto;
  right: max(var(--pad), 32px);
}
@media (max-width: 1400px) and (min-width: 901px) {
  #retatrutide .pep-type {
    top: calc(var(--nav-h) + 1.2rem);
    right: max(3.8rem, 6vw);
    max-width: min(20rem, 30vw);
  }
  #aod-9604 .pep-type {
    right: max(3.8rem, 6vw);
    max-width: min(18rem, 27vw);
  }
  #retatrutide .pep-n,
  #aod-9604 .pep-n {
    font-size: clamp(36px, 5vw, 68px);
  }
  #retatrutide h1,
  #aod-9604 h1 {
    font-size: clamp(16px, 2.5vw, 34px);
  }
}
#aicar .pep-hero,
#aicar .pep-vid {
  object-fit: contain;
  object-position: center center;
  transform: scaleX(-1);
}
#aicar .pep-veil {
  background: linear-gradient(90deg, #050506 0%, rgba(5,5,6,.55) 28%, transparent 52%);
}
#aicar .pep-type {
  margin-left: 0;
  max-width: min(28rem, 38vw);
  padding-left: max(var(--pad), 48px);
  padding-right: 4vw;
}
#aicar .pep-lab {
  left: max(var(--pad), 32px);
  right: auto;
}
#kpv .pep-hero,
#kpv .pep-vid {
  object-fit: contain;
  object-position: center center;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 8%, #000 88%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 8%, #000 88%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
#kpv .pep-veil {
  background:
    linear-gradient(270deg, #050506 0%, #050506 22%, rgba(5,5,6,.28) 38%, transparent 56%);
}
#kpv .pep-type {
  margin-left: auto;
  max-width: min(28rem, 38vw);
  padding-left: 4vw;
  padding-right: max(var(--pad), 48px);
}
#kpv .pep-lab {
  left: auto;
  right: max(var(--pad), 32px);
}
#aod-9604 .pep-hero,
#aod-9604 .pep-vid {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 3%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 3%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
#aod-9604 .pep-veil {
  background:
    linear-gradient(270deg, #050506 0%, rgba(5,5,6,.35) 22%, rgba(5,5,6,.08) 36%, transparent 52%);
}
#aod-9604 .pep-type {
  position: absolute;
  top: 50%;
  left: auto;
  right: max(4.5rem, 7vw);
  transform: translateY(-50%);
  margin: 0;
  max-width: min(22rem, 26vw);
  padding: 0;
}
#aod-9604 .pep-n {
  margin-bottom: 10px;
  font-size: clamp(48px, 6.5vw, 88px);
  line-height: 1;
}
#aod-9604 .pep-lab {
  left: auto;
  right: max(var(--pad), 32px);
}
#ll-37 .pep-hero,
#ll-37 .pep-vid {
  object-fit: cover;
  object-position: 12% 42%;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 8%, #000 82%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 8%, #000 82%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
#ll-37 .pep-veil {
  background:
    linear-gradient(270deg, #050506 0%, #050506 28%, rgba(5,5,6,.35) 42%, transparent 58%);
}
#ll-37 .pep-type {
  margin-left: auto;
  max-width: min(28rem, 38vw);
  padding-left: 4vw;
  padding-right: max(var(--pad), 48px);
}
#ll-37 .pep-lab {
  left: auto;
  right: max(var(--pad), 32px);
}
.pep-n {
  font-family: Michroma, "IBM Plex Sans", sans-serif;
  font-size: clamp(72px, 13vw, 160px);
  letter-spacing: .04em;
  line-height: .72;
  color: rgba(245,248,252,.16);
  margin: 0 0 48px;
}
.pep .k {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 36px);
  letter-spacing: .02em;
  text-transform: none;
  line-height: 1.12;
  margin: 0 0 18px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  background: linear-gradient(90deg, #3db8e6 0%, #c8f0fa 58%, #f5f8fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pep h1 {
  font-family: Michroma, "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 3.6vw, 48px);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 28px;
  color: #f5f8fc;
  white-space: nowrap;
  overflow: visible;
  overflow-wrap: normal;
  word-break: keep-all;
}
.pep-theses {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 34ch;
}
.pep-theses li {
  padding-left: 16px;
  border-left: 1px solid rgba(var(--accent-rgb),.45);
  font-size: 15px;
  font-weight: 300;
  color: rgba(245,248,252,.72);
  line-height: 1.45;
}
.pep-lab {
  position: absolute;
  z-index: 7;
  left: max(var(--pad), 32px);
  bottom: max(28px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  pointer-events: auto;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #f5f8fc;
  background: rgba(5, 5, 6, .78);
  border: 1px solid rgba(var(--accent-rgb), .55);
}
.pep-rail {
  position: absolute;
  right: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: Michroma, "IBM Plex Sans", sans-serif;
  font-size: 9px;
  letter-spacing: .14em;
}
.pep-rail a { color: rgba(245,248,252,.28); }
.pep-rail a.is-here { color: var(--accent); }
/* phone block moved to css/mobile/pep.css (tools/sync.py P7).
   Kill-switch stays here too: iOS caches css/mobile/pep.css?v= for a week,
   and desktop #id rules (width:min(62vw,72vh) + 16:9 contain) paint the tiny stamp. */
@media (max-width: 900px) {
  .pep,
  section.pep {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .pep-hero,
  .pep-vid,
  .pep .pep-hero,
  .pep .pep-vid {
    inset: auto 0 0 0 !important;
    top: auto !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vw * 16 / 9) !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: 50% 100% !important;
    transform: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .pep-hero,
  .pep .pep-hero { display: block !important; z-index: 1 !important; }
  .pep-vid.is-on.is-ready { display: block !important; }
  .pep .pep-vid:not(.is-ready) { opacity: 0 !important; }
  .pep-type,
  .pep .pep-type {
    top: calc(var(--nav-h, 52px) + 2.2vh) !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
  }
}