/* v90 — scroll-driven storytelling layer inspired by modern editorial science sites. */
.story-shell {
  --story-accent: #5bc5f2;
  --story-accent-rgb: 91, 197, 242;
  position: relative;
  overflow: clip;
  isolation: isolate;
}
.story-shell.story-green { --story-accent: #39c08f; --story-accent-rgb: 57, 192, 143; }
.story-shell.story-orange { --story-accent: #ee7100; --story-accent-rgb: 238, 113, 0; }

.story-chapter {
  position: relative;
  min-height: clamp(640px, 88vh, 960px);
  display: grid;
  align-items: center;
  overflow: clip;
  border-top: 1px solid rgba(var(--story-accent-rgb), .22);
  border-bottom: 1px solid rgba(var(--story-accent-rgb), .18);
  background: #061323;
}
.light-mode .story-chapter { background: #eef6fb; }

.story-chapter::before,
.story-chapter::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  height: 18%;
  pointer-events: none;
}
.story-chapter::before { top: 0; background: linear-gradient(to bottom, var(--page-bg, #061323), transparent); }
.story-chapter::after { bottom: 0; background: linear-gradient(to top, var(--page-bg, #061323), transparent); }
.light-mode .story-chapter::before { background: linear-gradient(to bottom, #f5fbff, transparent); }
.light-mode .story-chapter::after { background: linear-gradient(to top, #f5fbff, transparent); }

.story-chapter-bg,
.story-chapter-tint,
.story-chapter-pattern {
  position: absolute;
  inset: -10%;
  pointer-events: none;
}
.story-chapter-bg {
  z-index: 0;
  background-image: var(--story-bg);
  background-size: cover;
  background-position: center;
  filter: saturate(.78) contrast(.96) brightness(.55);
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.13);
  will-change: transform;
}
.light-mode .story-chapter-bg { filter: saturate(.68) contrast(.9) brightness(1.05); opacity: .42; }
.story-chapter-tint {
  z-index: 1;
  background:
    radial-gradient(circle at 72% 44%, rgba(var(--story-accent-rgb), .22), transparent 34%),
    linear-gradient(90deg, rgba(2, 12, 25, .94) 0%, rgba(2, 12, 25, .68) 46%, rgba(2, 12, 25, .18) 100%);
}
.light-mode .story-chapter-tint {
  background:
    radial-gradient(circle at 72% 44%, rgba(var(--story-accent-rgb), .18), transparent 34%),
    linear-gradient(90deg, rgba(245, 251, 255, .98) 0%, rgba(245, 251, 255, .84) 46%, rgba(245, 251, 255, .44) 100%);
}
.story-chapter-pattern {
  z-index: 1;
  opacity: .22;
  background-image:
    linear-gradient(rgba(var(--story-accent-rgb), .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--story-accent-rgb), .12) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(90deg, transparent 10%, #000 72%, transparent 100%);
}

.story-chapter-inner {
  position: relative;
  z-index: 3;
  width: min(94vw, 1900px);
  margin: 0 auto;
  padding: clamp(5rem, 10vh, 9rem) clamp(1.2rem, 3vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: clamp(2rem, 6vw, 8rem);
  align-items: center;
}
.story-copy {
  max-width: 850px;
  padding: clamp(1.4rem, 3vw, 3.4rem);
  border-left: 4px solid var(--story-accent);
  background: linear-gradient(90deg, rgba(5, 17, 32, .74), rgba(5, 17, 32, .2));
  backdrop-filter: blur(10px);
}
.light-mode .story-copy { background: linear-gradient(90deg, rgba(255,255,255,.88), rgba(255,255,255,.38)); }
.story-copy .story-kicker,
.story-panel .story-kicker,
.story-voice .story-kicker {
  color: var(--story-accent);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  font-weight: 700;
}
.story-copy h2 {
  max-width: 14ch;
  margin: .4rem 0 1rem;
  font-size: clamp(2.7rem, 5.8vw, 6.4rem);
  line-height: .96;
  letter-spacing: -.025em;
}
.story-copy p { max-width: 62ch; font-size: clamp(1.05rem, 1.35vw, 1.35rem); line-height: 1.65; }

.story-figure {
  position: relative;
  justify-self: end;
  width: min(100%, 700px);
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}
.story-figure::before {
  content: "";
  position: absolute;
  inset: 9% -5% -4% 12%;
  border: 2px solid rgba(var(--story-accent-rgb), .62);
  border-radius: 44% 56% 58% 42% / 50% 34% 66% 50%;
  transform: rotate(4deg);
}
.story-figure img {
  position: relative;
  display: block;
  width: 100%;
  max-height: min(72vh, 760px);
  object-fit: contain;
  border-radius: 2.2rem;
  box-shadow: 0 35px 90px rgba(0,0,0,.34);
}

.story-overlap {
  position: relative;
  width: min(94vw, 1900px);
  margin: clamp(4rem, 8vw, 8rem) auto;
  min-height: clamp(560px, 72vh, 820px);
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
}
.story-media {
  position: relative;
  z-index: 1;
  width: 76%;
  min-height: 520px;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 32px 90px rgba(0,0,0,.26);
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}
.story-media img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; display: block; }
.story-media::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg, transparent 48%, rgba(var(--story-accent-rgb), .22)); }
.story-panel {
  position: relative;
  z-index: 3;
  margin-left: -30%;
  padding: clamp(2rem, 4vw, 4.5rem);
  border-radius: 1.7rem;
  border: 1px solid rgba(var(--story-accent-rgb), .44);
  background: rgba(7, 20, 37, .94);
  box-shadow: 0 32px 80px rgba(0,0,0,.34);
  backdrop-filter: blur(16px);
}
.light-mode .story-panel { background: rgba(255,255,255,.94); box-shadow: 0 28px 70px rgba(26,62,89,.16); }
.story-panel h2 { margin:.4rem 0 1rem; font-size:clamp(2rem,3.7vw,4.3rem); line-height:1.02; }
.story-panel p { font-size:clamp(1rem,1.18vw,1.22rem); line-height:1.65; }
.story-panel .button { margin-top: 1rem; }

.story-voices {
  width: min(94vw, 1900px);
  margin: clamp(5rem, 10vw, 10rem) auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 2.2rem);
  align-items: start;
}
.story-voice {
  position: relative;
  padding: clamp(1.5rem, 2.8vw, 3rem);
  border-radius: 1.5rem;
  border: 1px solid rgba(var(--story-accent-rgb), .32);
  background: linear-gradient(145deg, rgba(var(--story-accent-rgb), .12), rgba(9, 24, 43, .92) 46%);
  box-shadow: 0 24px 60px rgba(0,0,0,.2);
  transform: translate3d(0, var(--parallax-y, 0px), 0);
}
.light-mode .story-voice { background: linear-gradient(145deg, rgba(var(--story-accent-rgb), .14), rgba(255,255,255,.96) 48%); }
.story-voice:nth-child(1) { grid-column: 1 / span 5; }
.story-voice:nth-child(2) { grid-column: 5 / span 5; margin-top: 8rem; }
.story-voice:nth-child(3) { grid-column: 9 / span 4; margin-top: 2rem; }
.story-voice p { font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.65; }
.story-voice strong { display:block; margin-top:1.2rem; }
.story-placeholder-label { display:inline-flex; margin-bottom:.8rem; padding:.28rem .55rem; border:1px dashed rgba(var(--story-accent-rgb),.72); border-radius:999px; color:var(--story-accent); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; }

.story-transition-band {
  width: min(94vw, 1900px);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 7rem) 0;
  border-top: 1px solid rgba(var(--story-accent-rgb), .22);
  text-align: center;
}
.story-transition-band h2 { font-size:clamp(2rem,4vw,4.5rem); max-width:18ch; margin:0 auto 1rem; }
.story-transition-band p { max-width:65ch; margin:0 auto; font-size:1.12rem; }

/* Scroll entry motion. */
[data-story-reveal] {
  opacity: 0;
  transition:
    opacity 850ms cubic-bezier(.2,.7,.2,1),
    transform 1050ms cubic-bezier(.16,.75,.2,1);
  transition-delay: var(--story-delay, 0ms);
}
[data-story-reveal="left"] { transform: translate3d(-90px, 36px, 0); }
[data-story-reveal="right"] { transform: translate3d(90px, 20px, 0); }
[data-story-reveal="up"] { transform: translate3d(0, 70px, 0); }
[data-story-reveal].is-story-visible { opacity: 1; transform: translate3d(0,0,0); }

/* Lab voices on People page. */
.people-story { padding-block: clamp(4rem, 8vw, 8rem); }
.people-story .story-voices { margin-top: 2rem; margin-bottom: 0; }
.people-story .story-voice-photo {
  width: 74px; height: 74px; border-radius: 50%; object-fit: cover; float: left; margin: 0 1rem .7rem 0;
  border: 3px solid var(--story-accent);
}
.people-story .section-head { max-width: 900px; }

@media (max-width: 1050px) {
  .story-chapter-inner { grid-template-columns: 1fr; }
  .story-copy { max-width: 780px; }
  .story-figure { justify-self: center; width: min(72vw, 620px); margin-top: -1rem; }
  .story-overlap { grid-template-columns: 1fr; padding-inline: 1rem; }
  .story-media { width: 88%; min-height: 430px; }
  .story-panel { width: 78%; margin: -9rem 0 0 auto; }
  .story-voice:nth-child(1) { grid-column: 1 / span 7; }
  .story-voice:nth-child(2) { grid-column: 6 / span 7; margin-top: 5rem; }
  .story-voice:nth-child(3) { grid-column: 2 / span 7; margin-top: 1rem; }
}

@media (max-width: 720px) {
  .story-chapter { min-height: auto; }
  .story-chapter-inner { width:100%; padding:5rem 1rem 4rem; gap:2rem; }
  .story-copy { padding:1.3rem; backdrop-filter:none; }
  .story-copy h2 { font-size:clamp(2.4rem,13vw,4rem); }
  .story-figure { width:min(92vw,520px); }
  .story-overlap { width:100%; min-height:auto; margin:3rem 0; padding:0 1rem; }
  .story-media { width:100%; min-height:300px; border-radius:1.2rem; }
  .story-media img { min-height:300px; }
  .story-panel { width:94%; margin:-3rem auto 0; padding:1.5rem; }
  .story-voices { width:100%; display:block; padding:0 1rem; }
  .story-voice, .story-voice:nth-child(n) { margin:1rem 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-story-reveal] { opacity:1 !important; transform:none !important; transition:none !important; }
  [data-story-parallax] { transform:none !important; }
}

/* v91 — explicit clipped parallax-window demo.
   The viewport stays fixed while a taller background image travels behind it,
   revealing different parts of the same photograph as the visitor scrolls. */
.parallax-window-demo {
  --parallax-demo-y: 140px;
  --parallax-demo-copy-y: 92px;
  --parallax-demo-copy-opacity: .28;
  position: relative;
  height: clamp(980px, 165vh, 1500px);
  margin: clamp(3rem, 7vw, 7rem) 0;
}
.parallax-window-sticky {
  position: sticky;
  top: var(--header-h, 72px);
  height: calc(100vh - var(--header-h, 72px));
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  border-block: 1px solid rgba(var(--story-accent-rgb), .28);
  background: #061426;
}
.parallax-window-bg {
  position: absolute;
  z-index: 0;
  inset: -18% -2%;
  background-image: var(--parallax-demo-bg);
  background-size: cover;
  background-position: center;
  transform: translate3d(0, var(--parallax-demo-y), 0) scale(1.16);
  will-change: transform;
  filter: saturate(.82) contrast(1.02) brightness(.62);
}
.parallax-window-sticky::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3,12,23,.9) 0%, rgba(3,12,23,.5) 42%, rgba(3,12,23,.12) 72%, rgba(3,12,23,.42) 100%),
    linear-gradient(180deg, rgba(3,12,23,.28), transparent 28%, transparent 70%, rgba(3,12,23,.52));
}
.parallax-window-frame {
  position: absolute;
  z-index: 2;
  inset: clamp(1rem, 3vw, 3rem);
  border: 1px solid rgba(var(--story-accent-rgb), .52);
  border-radius: 2rem;
  pointer-events: none;
}
.parallax-window-copy {
  position: relative;
  z-index: 3;
  width: min(92vw, 1900px);
  height: 100%;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 7rem) clamp(1.25rem, 4vw, 5rem);
  display: flex;
  align-items: center;
}
.parallax-window-card {
  max-width: min(650px, 48vw);
  padding: clamp(1.6rem, 3vw, 3.3rem);
  border-radius: 1.6rem;
  border: 1px solid rgba(var(--story-accent-rgb), .52);
  background: rgba(4,16,31,.82);
  box-shadow: 0 32px 90px rgba(0,0,0,.34);
  backdrop-filter: blur(10px);
  transform: translate3d(0, var(--parallax-demo-copy-y), 0);
  opacity: var(--parallax-demo-copy-opacity);
  will-change: transform, opacity;
}
.parallax-window-card h2 {
  margin: .45rem 0 1rem;
  font-size: clamp(2.2rem, 4.8vw, 5.4rem);
  line-height: .98;
}
.parallax-window-card p {
  font-size: clamp(1.02rem, 1.25vw, 1.28rem);
  line-height: 1.65;
}
.parallax-window-scroll-note {
  display: inline-flex;
  margin-top: 1rem;
  align-items: center;
  gap: .6rem;
  color: var(--story-accent);
  font-size: .83rem;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.light-mode .parallax-window-sticky { background: #eef6fb; }
.light-mode .parallax-window-bg { filter: saturate(.72) contrast(.94) brightness(1.03); }
.light-mode .parallax-window-sticky::before {
  background:
    linear-gradient(90deg, rgba(245,251,255,.93) 0%, rgba(245,251,255,.62) 42%, rgba(245,251,255,.12) 72%, rgba(245,251,255,.42) 100%),
    linear-gradient(180deg, rgba(245,251,255,.22), transparent 28%, transparent 70%, rgba(245,251,255,.48));
}
.light-mode .parallax-window-card { background: rgba(255,255,255,.88); box-shadow: 0 26px 70px rgba(18,52,79,.18); }
@media (max-width: 760px) {
  .parallax-window-demo { height: 120vh; min-height: 820px; }
  .parallax-window-sticky { min-height: 560px; }
  .parallax-window-card { max-width: 92vw; }
  .parallax-window-frame { inset: .8rem; border-radius: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .parallax-window-bg,
  .parallax-window-card { transform: none !important; opacity: 1 !important; }
}


/* v93 — people page parallax conversation strip with safer quote-card layout. */
.people-story {
  padding-block: clamp(3rem, 6vw, 5rem) 0;
  overflow: visible;
}
.people-story .section-head {
  max-width: 900px;
  margin-bottom: clamp(1.6rem, 3vw, 2.8rem);
}
.people-story .story-voices {
  width: min(1380px, calc(100% - clamp(28px, 5vw, 96px)));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
}
.people-parallax-stage {
  --story-stage-top: clamp(7rem, 18vh, 12rem);
  height: clamp(1080px, 185vh, 1580px);
  margin: 0;
}
.people-parallax-sticky {
  position: sticky;
  top: var(--header-h, 72px);
  height: calc(100vh - var(--header-h, 72px));
  min-height: 640px;
  overflow: hidden;
  isolation: isolate;
  background: #061426;
  border-block: 1px solid rgba(var(--story-accent-rgb), .20);
}
.people-parallax-sticky .parallax-window-bg {
  inset: -14% -1.5%;
  transform: translate3d(0, var(--parallax-demo-y), 0) scale(1.09);
  filter: grayscale(1) saturate(.78) contrast(1.02) brightness(.66);
}
.people-parallax-band,
.people-parallax-bottomband,
.people-parallax-haze {
  position: absolute;
  inset-inline: 0;
  pointer-events: none;
}
.people-parallax-band {
  top: 0;
  z-index: 2;
  height: var(--story-stage-top);
  background:
    linear-gradient(180deg, rgba(6,19,35,.99) 0%, rgba(6,19,35,.97) 64%, rgba(6,19,35,.80) 82%, rgba(6,19,35,0) 100%);
}
.people-parallax-bottomband {
  bottom: 0;
  z-index: 2;
  height: clamp(120px, 18vh, 220px);
  background:
    linear-gradient(180deg, rgba(6,19,35,0) 0%, rgba(6,19,35,.56) 34%, rgba(6,19,35,.96) 78%, rgba(6,19,35,.995) 100%);
}
.people-parallax-haze {
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3,12,23,.78) 0%, rgba(3,12,23,.48) 34%, rgba(3,12,23,.12) 56%, rgba(3,12,23,.46) 100%),
    linear-gradient(180deg, rgba(3,12,23,.04) 0%, rgba(3,12,23,.12) 24%, rgba(3,12,23,.28) 100%);
}
.people-parallax-copy {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: calc(var(--story-stage-top) - clamp(.8rem, 2vh, 1rem)) 0 clamp(5rem, 12vh, 8rem);
  display: block;
}
.people-story .story-voice {
  padding: clamp(1.35rem, 2.5vw, 2.25rem);
  border-radius: 1.4rem;
  border: 1px solid rgba(var(--story-accent-rgb), .32);
  background: linear-gradient(145deg, rgba(4,15,28,.90), rgba(9,24,43,.76));
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
.light-mode .people-story .story-voice {
  background: linear-gradient(145deg, rgba(255,255,255,.90), rgba(245,250,253,.76));
  box-shadow: 0 22px 64px rgba(26,62,89,.18);
}
.people-story .story-voice:nth-child(1) { grid-column: 1 / span 5; margin-top: clamp(1rem, 4vh, 3rem); }
.people-story .story-voice:nth-child(2) { grid-column: 7 / span 5; margin-top: clamp(11rem, 21vh, 15rem); }
.people-story .story-voice:nth-child(3) { grid-column: 3 / span 5; margin-top: clamp(3rem, 7vh, 6rem); }
.people-story .story-voice p { font-size: clamp(1rem, 1.22vw, 1.24rem); line-height: 1.7; }
.people-story .story-voice-photo {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
  float: left;
  margin: 0 1rem .7rem 0;
  border: 3px solid var(--story-accent);
}
.light-mode .people-parallax-sticky {
  background: #eef6fb;
}
.light-mode .people-parallax-sticky .parallax-window-bg {
  filter: grayscale(1) saturate(.62) contrast(.94) brightness(1.03);
}
.light-mode .people-parallax-band {
  background:
    linear-gradient(180deg, rgba(244,249,252,.995) 0%, rgba(244,249,252,.96) 62%, rgba(244,249,252,.72) 82%, rgba(244,249,252,0) 100%);
}
.light-mode .people-parallax-bottomband {
  background:
    linear-gradient(180deg, rgba(244,249,252,0) 0%, rgba(244,249,252,.42) 34%, rgba(244,249,252,.92) 78%, rgba(244,249,252,.99) 100%);
}
.light-mode .people-parallax-haze {
  background:
    linear-gradient(90deg, rgba(244,249,252,.80) 0%, rgba(244,249,252,.52) 34%, rgba(244,249,252,.16) 56%, rgba(244,249,252,.36) 100%),
    linear-gradient(180deg, rgba(244,249,252,.06) 0%, rgba(244,249,252,.08) 24%, rgba(244,249,252,.28) 100%);
}
@media (max-width: 1200px) {
  .people-story .story-voice:nth-child(1) { grid-column: 1 / span 7; }
  .people-story .story-voice:nth-child(2) { grid-column: 6 / span 7; margin-top: clamp(10rem, 18vh, 13rem); }
  .people-story .story-voice:nth-child(3) { grid-column: 2 / span 7; margin-top: clamp(2rem, 5vh, 4rem); }
}
@media (max-width: 820px) {
  .people-parallax-stage {
    height: auto;
    min-height: 0;
  }
  .people-parallax-sticky {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    padding: 0 0 2rem;
  }
  .people-parallax-copy {
    padding: clamp(5rem, 12vw, 6.4rem) 0 clamp(2.4rem, 8vw, 3.2rem);
  }
  .people-story .story-voices {
    display: block;
    width: min(100%, calc(100% - 2rem));
  }
  .people-story .story-voice,
  .people-story .story-voice:nth-child(n) {
    grid-column: auto;
    margin: 0 0 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .people-parallax-stage,
  .people-parallax-sticky,
  .people-parallax-sticky .parallax-window-bg,
  .people-story .story-voice {
    transform: none !important;
  }
}


/* v165 — stronger conference parallax image layer. */
.parallax-window-bg-image {
  top: -26%;
  left: -3%;
  right: auto;
  bottom: auto;
  width: 106%;
  height: 152%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: center center;
  background-image: none !important;
}
@media (max-width: 760px) {
  .parallax-window-bg-image {
    left: -10%;
    width: 120%;
    object-position: 62% center;
  }
}