/* style.css — Beyond Genomix design system */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 4.5rem);
  --text-hero: clamp(2.75rem, 1rem + 5.5vw, 6rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- BGX BRAND COLORS ---- */
  /* Deep blue background — deep but not near-black */
  --color-bg: #071a3a;
  --color-bg-deep: #050f28;
  --color-surface: #0b2348;
  --color-surface-2: #0e2c58;
  --color-border: rgba(120, 170, 220, 0.16);
  --color-divider: rgba(120, 170, 220, 0.12);

  /* Text */
  --color-text: #eaf2fb;
  --color-text-muted: #9fb4cf;
  --color-text-faint: #6c84a6;
  --color-text-inverse: #071a3a;

  /* Teal / turquoise accent */
  --color-primary: #1ec8c8;
  --color-primary-soft: #4fdede;
  --color-primary-hover: #38d6d6;
  --color-primary-glow: rgba(30, 200, 200, 0.45);

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --transition-interactive: 220ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Content widths */
  --content-narrow: 680px;
  --content-default: 1000px;
  --content-wide: 1240px;

  /* Fonts — match Interline Therapeutics: Open Sans body, geometric display (Axiforma analog -> Montserrat) */
  --font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Montserrat', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Inconsolata', 'SFMono-Regular', monospace;
}

/* ============ LAYOUT ============ */
.container {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 5vw, var(--space-16));
}
.container--narrow {
  max-width: var(--content-narrow);
}
.container--default {
  max-width: var(--content-default);
}
/* Interline row container: width 80%, max 1080px, centered */
.container--row {
  width: 80%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 0;
}
@media (max-width: 980px) {
  .container--row {
    width: 100%;
    max-width: 100%;
    padding-inline: 30px;
  }
}

section {
  position: relative;
}
.section-pad {
  padding-block: clamp(var(--space-20), 11vw, var(--space-32));
}

/* ============ TYPOGRAPHY HELPERS ============ */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 500;
  display: inline-block;
}
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.text-muted {
  color: var(--color-text-muted);
}
.lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ============ HEADER / NAV ============ */
/* Match live beyondgenomix.com: logo at 55px side margin, aligned with hero title */
.site-header .container {
  max-width: none;
  padding-inline: 55px;
}
@media (max-width: 768px) {
  .site-header .container {
    padding-inline: 24px;
  }
}
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: var(--space-5);
  transition: background var(--transition-interactive), backdrop-filter var(--transition-interactive), padding var(--transition-interactive), border-color var(--transition-interactive);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(5, 15, 40, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-block: var(--space-3);
  border-bottom-color: var(--color-border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  flex-shrink: 0;
}
.brand svg,
.brand img {
  /* Match live beyondgenomix.com logo size: width 72px */
  width: 72px;
  height: auto;
  display: block;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-5), 2.4vw, var(--space-10));
  list-style: none;
}
.nav__links a {
  color: #fff;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  padding-block: var(--space-1);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 1px;
  width: 0;
  /* Same thin gradient as the hero scroll line, reversed: faint on the left, solid teal on the right */
  background: linear-gradient(90deg, rgba(30, 200, 200, 0.05), var(--color-primary));
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__links a:hover,
.nav__links a[aria-current='page'] {
  color: var(--color-text);
}
.nav__links a:hover::after,
.nav__links a[aria-current='page']::after {
  width: 100%;
}
.nav__toggle {
  display: none;
  color: var(--color-text);
}

/* ============ BUTTONS / LINKS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  letter-spacing: 0.01em;
}
.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.btn--primary:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 0 28px var(--color-primary-glow);
  transform: translateY(-1px);
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.link-arrow svg {
  transition: transform var(--transition-interactive);
}
.link-arrow:hover svg {
  transform: translateX(5px);
}

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  overflow: hidden;
  padding-top: clamp(7rem, 14vh, 10rem);
  padding-bottom: clamp(5rem, 10vh, 8rem);
}
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 60ch;
}
/* Live beyondgenomix.com: hero title aligned to the 55px side margin (same as logo),
   spans full width between margins, left-aligned + justified */
.hero > .container {
  max-width: none;
  width: 100%;
  padding-inline: 55px;
}
.hero__inner--center {
  margin-inline: 0;
  width: 100%;
  max-width: none;
  /* Nudge text 3px left so the visible "M" edge aligns with the logo's visible edge
     (glyph side-bearing makes the M paint ~3px inside its box) */
  padding-left: 0;
  margin-left: 0;
  padding-right: 0;
}
@media (max-width: 768px) {
  .hero > .container {
    padding-inline: 24px;
  }
}
.hero h1 {
  /* Match live beyondgenomix.com hero: Poppins 400, 42px / 50.4px, justified, white */
  font-family: 'Poppins', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  /* Fluid size so line 1 always fills the exact width between the 55px margins
     (M under logo edge, last letter under CONNECT) at ANY viewport width.
     No upper cap so the title keeps filling the full width on large monitors. */
  font-size: max(28px, 3.9222vw);
  line-height: 1.2;
  letter-spacing: 0;
  color: #fff;
  text-align: left;
  text-wrap: normal;
  hyphens: none;
  margin: 0;
}
/* Title in two distinct phrases: line 1 spans the full width (left margin to right),
   line 2 is a shorter phrase centered underneath */
.hero h1 .hero__line1,
.hero h1 .hero__line2 {
  display: block;
  white-space: nowrap;
}
.hero h1 .hero__line2 {
  text-align: center;
}
@media (max-width: 768px) {
  .hero {
    justify-content: flex-start;
    text-align: left;
  }
  .hero__inner--center {
    padding-inline: 24px;
  }
  .hero h1 {
    font-size: 30px;
    line-height: 1.25;
    text-align: left;
  }
  .hero h1 .hero__line1,
  .hero h1 .hero__line2 {
    white-space: normal;
    text-align: left;
    letter-spacing: 0;
  }
  .hero__br {
    display: none;
  }
}
.hero h1 .accent {
  color: var(--color-primary);
}
/* Science page: single centered hero title "OUR SCIENCE" at the same hero size,
   centered both horizontally (in its block) and as a single line. */
.hero__inner--title {
  display: flex;
  justify-content: center;
  margin-left: 0;
}
.hero h1.hero--centered {
  text-align: center;
  width: auto;
  white-space: nowrap;
  letter-spacing: 0.04em;
}
/* Scientific Focus sub-headings: same size/treatment as WHO WE ARE, with a little
   extra top space to separate each sub-block. */
.whoweare__title--sub {
  margin-top: 2.75%;
}
.hero__sub {
  margin-top: var(--space-6);
  margin-inline: auto;
  max-width: 44ch;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}
.hero__scroll {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: #fff;
  font-family: 'Axiforma Book', Helvetica, Arial, Lucida, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.hero__scroll .line {
  width: 1px;
  /* Reach all the way down to the bottom edge of the viewport */
  height: clamp(120px, 22vh, 200px);
  /* Faint at the top, solid teal toward the bottom */
  background: linear-gradient(rgba(30, 200, 200, 0.05), var(--color-primary));
  transform-origin: top;
  animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine {
  0%, 100% { transform: scaleY(0.45); opacity: 0.35; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ============ PER-SECTION VAPOROUS GLOW (BioAge-style) ============ */
/* Each section gets its own soft, heavily-blurred teal cloud that slowly drifts
   and breathes, melting into the dark background with no visible edge — like the
   atmospheric blooms on bioagelabs.com. Footer is excluded. */
.whoweare-section,
.quote-section,
.news-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.whoweare-section::before,
.whoweare-section::after,
.quote-section::before,
.quote-section::after,
.news-section::before,
.news-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.22;
  will-change: transform;
}
/* Primary cloud — drifts across the section */
.whoweare-section::before,
.quote-section::before,
.news-section::before {
  width: 48vw;
  height: 48vw;
  max-width: 680px;
  max-height: 680px;
  top: -14%;
  left: -8%;
  background: radial-gradient(circle at 50% 50%, rgba(40, 128, 132, 0.6), rgba(30, 120, 200, 0.18) 48%, transparent 72%);
  animation: glowDriftA 22s ease-in-out infinite alternate;
}
/* Secondary cloud — opposite corner, different rhythm */
.whoweare-section::after,
.quote-section::after,
.news-section::after {
  width: 40vw;
  height: 40vw;
  max-width: 560px;
  max-height: 560px;
  bottom: -18%;
  right: -10%;
  background: radial-gradient(circle at 50% 50%, rgba(34, 110, 116, 0.5), rgba(30, 200, 200, 0.12) 50%, transparent 74%);
  animation: glowDriftB 27s ease-in-out infinite alternate;
}
/* Offset each section so they don't drift in sync */
.quote-section::before { animation-duration: 25s; animation-delay: -6s; }
.quote-section::after { animation-duration: 31s; animation-delay: -9s; }
.news-section::before { animation-duration: 28s; animation-delay: -12s; }
.news-section::after { animation-duration: 34s; animation-delay: -4s; }
/* Continuous wandering drift — no return-to-start pause, so motion is always visible */
@keyframes glowDriftA {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(18%, 14%) scale(1.1); }
  50%  { transform: translate(34%, 26%) scale(1.16); }
  75%  { transform: translate(14%, 32%) scale(1.08); }
  100% { transform: translate(30%, 8%) scale(1.14); }
}
@keyframes glowDriftB {
  0%   { transform: translate(0, 0) scale(1.12); }
  25%  { transform: translate(-16%, -12%) scale(1.04); }
  50%  { transform: translate(-30%, -26%) scale(1); }
  75%  { transform: translate(-12%, -30%) scale(1.06); }
  100% { transform: translate(-28%, -6%) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .whoweare-section::before,
  .whoweare-section::after,
  .quote-section::before,
  .quote-section::after,
  .news-section::before,
  .news-section::after { animation: none; }
}

/* ============ VAPOR / BACKGROUND FX ============ */
.fx-vapor {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.fx-vapor__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  mix-blend-mode: screen;
  will-change: transform;
}
.fx-vapor__orb--a {
  width: 60vw;
  height: 60vw;
  max-width: 820px;
  max-height: 820px;
  top: -18%;
  right: -10%;
  background: radial-gradient(circle at 35% 35%, rgba(30, 200, 200, 0.55), rgba(30, 120, 200, 0.25) 45%, transparent 70%);
  animation: vaporSpin 38s linear infinite;
}
.fx-vapor__orb--b {
  width: 48vw;
  height: 48vw;
  max-width: 640px;
  max-height: 640px;
  bottom: -22%;
  left: -12%;
  background: radial-gradient(circle at 50% 50%, rgba(70, 100, 220, 0.45), rgba(30, 200, 200, 0.18) 50%, transparent 72%);
  animation: vaporSpin 52s linear infinite reverse;
}
.fx-vapor__orb--c {
  width: 34vw;
  height: 34vw;
  max-width: 440px;
  max-height: 440px;
  top: 35%;
  left: 40%;
  background: radial-gradient(circle at 50% 50%, rgba(120, 180, 255, 0.32), transparent 68%);
  animation: vaporSpin 44s linear infinite;
}
@keyframes vaporSpin {
  0% { transform: rotate(0deg) translate(0, 0) scale(1); }
  50% { transform: rotate(180deg) translate(4%, -3%) scale(1.08); }
  100% { transform: rotate(360deg) translate(0, 0) scale(1); }
}
/* Deep blue veil to keep vapor subtle and the page dark */
.fx-vapor::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, transparent 0%, rgba(5, 15, 40, 0.42) 78%),
    linear-gradient(180deg, rgba(7, 26, 58, 0.22), rgba(5, 15, 40, 0.5));
}
/* Subtle grain to avoid banding */
.fx-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ GENERIC SECTION HEADERS ============ */
.section-head {
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
  color: #fff;
  margin-top: var(--space-4);
}
.section-head p {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 60ch;
}

/* ============ WHO WE ARE ============ */
/* Interline structure: single full-width column, left-aligned, stacked:
   h2 -> paragraph -> Learn More button. Section padding 65px / 115px.
   Module spacing 2.75% (margin-bottom). */
.whoweare {
  position: relative;
  z-index: 2;
}
.whoweare-section {
  padding-top: 97px;
  padding-bottom: 97px;
}
.whoweare__stack {
  text-align: left;
}
.whoweare h2,
.whoweare__title {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 35px;
  line-height: 42px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 2.75%;
}
.whoweare__stack p {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 30px;
  color: rgb(245, 245, 245);
  margin: 0 0 2.75%;
  max-width: none;
  text-align: justify;
  hyphens: none;
}
.whoweare__stack .whoweare__cta {
  /* BioAge-style frosted button: translucent teal fill, no border, mildly rounded,
     italic uppercase bold white text. Hover = fill solidifies to opaque teal. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 8px 24px;
  text-decoration: none;
  background: rgba(30, 200, 200, 0.30);
  border: none;
  border-radius: 12px;
  font-family: 'Poppins', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  transition: all 0.5s cubic-bezier(0.17, 0.17, 0.41, 1);
}
.whoweare__stack .whoweare__cta:hover,
.whoweare__stack .whoweare__cta:active {
  /* Same teal, now fully opaque (frosted-clears-to-solid effect) */
  background: var(--color-primary);
  border: none;
  color: #fff;
  box-shadow: none;
  transform: none;
}

/* ============ QUOTE ============ */
.quote-section {
  position: relative;
  z-index: 2;
}
/* Interline section_2: vertical padding matches footer total height (97px) */
.quote-pad {
  padding-top: 97px;
  padding-bottom: 97px;
}
/* Option A: subtle ocean-blue veil + thin turquoise left border on the quote rectangle.
   A ::before pseudo-element draws the veil so it can extend slightly beyond the text
   (36px each side, 32px top/bottom) WITHOUT moving the text edges (still 128 -> 1152). */
.quote-section .container {
  position: relative;
}
.quote-section .container::before {
  content: "";
  position: absolute;
  inset: -32px -36px;
  background: rgba(0, 60, 109, 0.28);
  border-left: 2px solid var(--color-primary);
  border-radius: 4px;
  z-index: -1;
  pointer-events: none;
}

/* ============ NEWS (Interline-style list) ============ */
.news-section {
  z-index: 2;
  padding-top: 97px;
  padding-bottom: 97px;
}
.news__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin: 0 0 2.75%;
  flex-wrap: wrap;
}
.news__eyebrow {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 35px;
  line-height: 42px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0;
}
/* More News button — same frosted teal pill as the Learn More button */
.news__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 8px 24px;
  text-decoration: none;
  background: rgba(30, 200, 200, 0.30);
  border: none;
  border-radius: 12px;
  font-family: 'Poppins', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  transition: all 0.5s cubic-bezier(0.17, 0.17, 0.41, 1);
}
.news__more:hover,
.news__more:active {
  background: var(--color-primary);
  color: #fff;
}
.news__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 2.6vw, 40px);
  border-top: 1px solid rgba(30, 200, 200, 0.18);
  padding-top: 44px;
}
.news__item {
  display: flex;
  flex-direction: column;
}
@media (max-width: 1100px) {
  .news__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 860px) {
  .news__list {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .news__item {
    padding: 32px 0;
    border-bottom: 1px solid rgba(30, 200, 200, 0.18);
  }
}
.news__title {
  align-self: flex-start;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 21px;
  line-height: 29px;
  letter-spacing: 0;
  color: rgb(255, 255, 255);
  text-decoration: none;
  transition: color 0.4s cubic-bezier(0.17, 0.17, 0.41, 1);
}
.news__title:hover,
.news__title:focus-visible {
  color: var(--color-primary);
}
.news__excerpt {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 30px;
  color: rgb(245, 245, 245);
  text-align: left;
  margin: 14px 0 0;
  min-height: 150px;
  max-width: none;
}
.news__date {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 11px;
  line-height: 18px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-primary);
  padding-top: 18px;
}
.quote {
  /* Centered quote (name + role centered too). */
  width: 100%;
  max-width: none;
  margin-inline: auto;
  text-align: center;
}
.quote__mark {
  display: none;
}
.quote blockquote {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0;
  color: rgb(245, 245, 245);
  text-align: center;
  hyphens: none;
  /* Interline module spacing: 2.75% below the quote block */
  margin: 0 0 2.75%;
}
.quote figcaption {
  margin: 0;
  max-width: none;
  width: 100%;
  text-align: center;
}
.quote__author {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 200;
  font-size: 18px;
  line-height: 28px;
  color: var(--color-primary);
}
.quote__role {
  font-family: 'Poppins', sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 11px;
  line-height: 18px;
  color: #fff;
  margin-top: var(--space-2);
}
.quote__role--gap {
  margin-top: 10px;
}
.quote__q {
  color: var(--color-primary);
}

/* ============ OUR SCIENCE: 2-column split inside container--row ============ */
/* Reusable split: text column + visual column. Lives INSIDE .container--row so the
   outer margins are EXACTLY the same as the home page rectangles. */
.sci-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: center;
}
.sci-split--text-left {
  grid-template-columns: 1.05fr 0.95fr;
  /* Align the TOP of the text with the TOP of the visual rectangle. The title
     (.whoweare__title) has no top margin, so its first line sits exactly at the
     top edge of the animation box. */
  align-items: start;
}
.sci-split--text-right {
  grid-template-columns: 0.95fr 1.05fr;
  align-items: start;
}
/* Equal-height variant: the text column matches the EXACT height of the visual
   square (cell-stage). Top is already aligned (title has no top margin); we
   stretch the text column to the full row height and push the paragraphs to
   fill it so the last line ends flush with the bottom of the square. */
.sci-split--equalheight {
  align-items: stretch;
}
/* Equal-height: the text column flows naturally (no artificial gaps). The visual
   column stretches to the SAME height as the text, and the cell stage fills it
   100% so the rectangle's top AND bottom match the text exactly. */
.sci-split--equalheight .sci-split__text {
  display: flex;
  flex-direction: column;
}
.sci-split--equalheight .sci-split__visual {
  align-self: stretch;
  height: 100%;
}
.sci-split--equalheight .sci-split__visual .cell-stage {
  aspect-ratio: auto;
  height: 100%;
  min-height: 100%;
}
/* Optical top alignment: the title's line-height (42px) is taller than its
   font-size (35px), so its glyphs render ~4px ABOVE the title's box top. Since
   the box top already matches the cell square top, the LETTERS stick out ~4px
   above the square. Nudge the title down by that half-leading so the TOP OF THE
   LETTERS sits exactly on the top edge of the animation square, at the pixel. */
.sci-split--equalheight .sci-split__text .whoweare__title {
  /* OPTICAL top alignment to the INK of the capitals. Poppins reserves a large
     amount of space above its capital letters inside the line box, so even with
     glyph-box top = rectangle top, the visible top of the letters sits ~12.5px
     LOWER than the rectangle's top edge. Pull the title up so the painted top of
     the capitals lands exactly on the rectangle top edge. */
  margin-top: -10px;
  padding-top: 0;
}
/* Optical bottom alignment: the last paragraph's line-height (28px) is taller
   than its glyphs, leaving ~17px of half-leading/descender space below the last
   line of text. That made the animation square (which matches the text-box
   height) extend ~17px BELOW the bottom of the letters. Pull the text box bottom
   up to the baseline of the last line so the square bottom sits exactly on the
   bottom of the letters, at the pixel. */
.sci-split--equalheight .sci-split__text p:last-child {
  margin-bottom: -3px;
}
/* Scientific Focus: tall text column — align boxes to the top so they line up
   with the section heading instead of floating in the middle. */
.sci-split--align-top {
  align-items: start;
}
.sci-split--align-top .sci-split__visual {
  position: sticky;
  top: 120px;
}
/* Visual placed on the RIGHT by default (text first in DOM). */
.sci-split__visual {
  position: relative;
  width: 100%;
}
/* When the visual must sit on the LEFT, it comes first in the DOM and we keep the
   text in the second column — no order swap needed because DOM order = visual,text. */

/* ============ OUR SCIENCE: intro split with cell anim ============ */
.science-intro__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(var(--space-10), 6vw, var(--space-24));
  align-items: center;
}
.science-intro__text p + p {
  margin-top: var(--space-6);
}
.science-intro__text p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.8;
}
.cell-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(14, 44, 88, 0.6), rgba(5, 15, 40, 0.2));
  border: 1px solid var(--color-border);
}
.cell-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ============ SCIENTIFIC FOCUS PILLARS ============ */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(var(--space-5), 2vw, var(--space-8));
  margin-top: var(--space-8);
}
/* Three pillars side by side (after Clinical Translation moved out). */
.pillars--three {
  grid-template-columns: repeat(3, 1fr);
}
/* Four pillars as a 2×2 grid — wide and airy. */
.pillars--four {
  grid-template-columns: repeat(2, 1fr);
}
/* When pillars sit inside the Scientific Focus split column (on the LEFT),
   keep them as a tight 2x2 grid that fills the column. */
.pillars--compact {
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-4), 1.6vw, var(--space-6));
}
.pillar {
  background: linear-gradient(160deg, rgba(14, 44, 88, 0.5), rgba(11, 35, 72, 0.25));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 2.5vw, var(--space-10));
  transition: border-color var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive);
}
.pillar:hover {
  border-color: rgba(30, 200, 200, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(5, 15, 40, 0.6);
}
/* Shared media slot: every Scientific Focus box reserves an identical-height
   zone for its animation, so the titles + body text below all start on the
   exact same baseline across the three boxes. The animation is centred. */
.pillar__media {
  height: 168px;
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pillar__icon {
  width: 150px;
  height: 150px;
  display: block;
}
/* Hallmarks wheel: signature animation, now sized to match the shared slot. */
.hallmarks-wheel,
.measurement-anim,
.diag-fingerprint,
.sphere-mini {
  width: 168px;
  height: 168px;
  position: relative;
}
.hallmarks-wheel canvas,
.measurement-anim canvas,
.diag-fingerprint canvas,
.sphere-mini canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.pillar h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 28px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.pillar h3 .num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-primary);
  letter-spacing: 0.2em;
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 500;
}
.pillar p {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  color: rgb(245, 245, 245);
  text-align: justify;
  hyphens: none;
}

/* ---- Compact icon-only pillar (used in the Scientific Focus split, on the LEFT) ---- */
.pillar--icononly {
  padding: clamp(var(--space-5), 2vw, var(--space-7));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  min-height: 0;
}
.pillar--icononly .pillar__icon {
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-4);
}
.pillar--icononly h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 24px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  margin-bottom: 0;
}
.pillar--icononly h3 .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-primary);
  letter-spacing: 0.2em;
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 500;
}

/* ============ MISSION PAGE ============ */
/* Large two-line lead statement (intro). */
.mission-lead {
  max-width: none;
  margin-inline: 0;
}
.mission-lead__line {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 27px;
  line-height: 38px;
  white-space: nowrap;
  letter-spacing: 0;
  color: #fff;
  margin: 0 0 0.9em;
  text-align: left;
}
.mission-lead__line--accent {
  color: var(--color-primary);
  margin-bottom: 0;
}

/* Mission + Vision: two statement blocks side by side. */
.mission-statements {
  padding-top: 0;
}
.mission-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
}
/* BGX logo lockup between Our Mission and Our Vision. The 'i' of GENOMiX
   (the i of AI) glows turquoise in a slow breathing pulse. */
.mission-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.mission-logo__lockup {
  position: relative;
  width: clamp(180px, 16vw, 240px);
  line-height: 0;
}
.mission-logo__img {
  display: block;
  width: 100%;
  height: auto;
}
/* glowing dot precisely over the i-dot of GENOMiX */
.mission-logo__i {
  position: absolute;
  left: 87.4%;
  top: 55.8%;
  width: 7.5%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(9,204,190,1) 0%, rgba(79,227,224,0.95) 45%, rgba(9,204,190,0) 72%);
  opacity: 0;
  animation: i-pulse 3.4s ease-in-out infinite;
}
@keyframes i-pulse {
  0%, 100% { opacity: 0.18; filter: drop-shadow(0 0 2px rgba(9,204,190,0.4)); transform: translate(-50%, -50%) scale(0.82); }
  50% { opacity: 1; filter: drop-shadow(0 0 9px rgba(9,204,190,0.95)) drop-shadow(0 0 16px rgba(79,227,224,0.6)); transform: translate(-50%, -50%) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .mission-logo__i { animation: none; opacity: 0.9; }
}
.mission-statement {
  text-align: center;
}
.mission-statement__eyebrow {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 35px;
  line-height: 42px;
  letter-spacing: 0;
  color: var(--color-primary);
  margin: 0 0 var(--space-5);
  text-transform: none;
}
.mission-statement__body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 30px;
  color: #fff;
  margin: 0 auto;
  max-width: 34ch;
  text-align: center;
}

/* We Value (Interline-style): vertical list, animated icon LEFT + text RIGHT.
   The whole list is offset to the right so the icons sit in an indented
   column, leaving generous breathing room on the left like the reference. */
.values-list {
  margin-top: var(--space-9);
  max-width: none;
  margin-left: 0;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-8), 5vw, var(--space-11));
}
.value-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  column-gap: 84px;
  align-items: center;
}
.value-row__icon {
  width: 64px;
  height: 64px;
  flex: none;
}
.value-row__icon .vicon-svg {
  display: block;
  overflow: visible;
  /* Turquoise line-art that gently PULSES on a loop (halo breathing in/out),
     like the Clinical Translation animation. Hover boosts the glow. */
  filter: drop-shadow(0 0 0 rgba(9, 204, 190, 0));
  animation: vicon-breathe 3.4s ease-in-out infinite;
  transition: filter 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
/* stagger each icon so the pulse feels natural, not synchronised */
.value-row:nth-child(1) .vicon-svg { animation-delay: 0s; }
.value-row:nth-child(2) .vicon-svg { animation-delay: 0.55s; }
.value-row:nth-child(3) .vicon-svg { animation-delay: 1.1s; }
.value-row:nth-child(4) .vicon-svg { animation-delay: 1.65s; }
.value-row:nth-child(5) .vicon-svg { animation-delay: 2.2s; }
@keyframes vicon-breathe {
  0%, 100% {
    filter: drop-shadow(0 0 1px rgba(9, 204, 190, 0.25))
            drop-shadow(0 0 3px rgba(9, 204, 190, 0.12));
  }
  50% {
    filter: drop-shadow(0 0 6px rgba(9, 204, 190, 0.85))
            drop-shadow(0 0 14px rgba(9, 204, 190, 0.5));
  }
}
.value-row:hover .value-row__icon .vicon-svg {
  animation: none;
  filter: drop-shadow(0 0 7px rgba(9, 204, 190, 0.95))
          drop-shadow(0 0 16px rgba(9, 204, 190, 0.6));
}
.value-row__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 21px;
  line-height: 30px;
  color: var(--color-primary);
  margin: 0 0 var(--space-4);
  letter-spacing: 0;
}
.value-row__body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 30px;
  color: rgb(245, 245, 245);
  margin: 0;
  max-width: none;
  text-align: justify;
  hyphens: none;
}

@media (max-width: 900px) {
  .mission-grid { grid-template-columns: 1fr; gap: var(--space-9); }
  .mission-orb { order: -1; }
  .mission-logo__lockup { width: clamp(180px, 46vw, 230px); }
}
@media (max-width: 600px) {
  .value-row {
    grid-template-columns: 64px 1fr;
    column-gap: var(--space-5);
  }
  .value-row__icon { width: 56px; height: 56px; }
}

/* ============ CLINICAL TRANSLATION CARD ============ */
/* A framed rectangle (card) with text on the LEFT and an explanatory pipeline
   animation on the RIGHT. Lives inside .container--row so outer margins match
   the home page exactly. */
.clinical-card {
  background: linear-gradient(150deg, rgba(14, 44, 88, 0.55), rgba(11, 35, 72, 0.28));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  /* SAME inner padding as the Scientific Focus pillars so the cards feel
     homogeneous (pillars use clamp(--space-6, 2.5vw, --space-10) = 32px here). */
  padding: clamp(var(--space-6), 2.5vw, var(--space-10));
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: stretch;
  overflow: hidden;
  position: relative;
}
.clinical-card__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.clinical-card__text .whoweare__title {
  margin-bottom: var(--space-5);
  /* Optical: line-height > font-size leaves ~4px half-leading above the glyphs.
     Nudge up so the letter tops sit exactly on the viz square top edge. */
  padding-top: 4px;
}
.clinical-card__text p {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 30px;
  color: rgb(245, 245, 245);
  text-align: justify;
  hyphens: none;
}
.clinical-card__viz {
  position: relative;
  width: 100%;
  align-self: stretch;
  height: 100%;
  min-height: 240px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(14, 44, 88, 0.5), rgba(5, 15, 40, 0.15));
  border: 1px solid var(--color-border);
}
.clinical-card__viz canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Clinical Translation as a plain split (no outer card): the animation lives in a
   framed rectangle on the right, exactly like the Interconnected / Atlas squares,
   so the text starts at the SAME 128px margin as the home page and the rectangle
   ends at 1152px. No extra inner padding offset. */
.clinical-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(14, 44, 88, 0.5), rgba(5, 15, 40, 0.15));
  border: 1px solid var(--color-border);
}
.clinical-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ============ ATLAS ============ */
.atlas {
  position: relative;
  z-index: 2;
}
.atlas__card {
  background: linear-gradient(150deg, rgba(14, 44, 88, 0.7), rgba(11, 35, 72, 0.3));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-8), 5vw, var(--space-20));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-8), 5vw, var(--space-20));
  align-items: center;
  overflow: hidden;
  position: relative;
}
.atlas__card h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  color: #fff;
  margin-bottom: var(--space-5);
}
.atlas__card p {
  color: var(--color-text-muted);
  line-height: 1.8;
}
/* Atlas: the visual column matches the EXACT height of the text block (title +
   paragraph), exactly like the Interconnected cell-stage. The sphere's diameter
   equals that height and the globe is pushed to the RIGHT so its right edge sits
   on the right margin (1152) like everything else. */
.sci-split--atlas {
  align-items: stretch;
}
/* The last paragraph's default 14px bottom margin sat inside the stretched text
   column, making the section's bottom whitespace (111px) larger than its top
   padding (97px). Remove it so top and bottom section margins are perfectly
   equal (97px / 97px), matching the home page. The Atlas sphere multiplier is
   re-tuned in atlas.js to keep the globe visually identical after this change. */
.sci-split--atlas .sci-split__text p:last-child {
  margin-bottom: 0;
}
.sci-split--atlas .sci-split__visual {
  align-self: stretch;
  height: 100%;
}
.atlas__viz {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
}
.atlas__viz canvas {
  width: 100%;
  height: 100%;
}

/* ============ FOOTER ============ */
.site-footer {
  position: relative;
  z-index: 2;
  /* Match the scrolled header: same deep-blue tint, blur AND height (97px) */
  padding-block: 0;
  min-height: 97px;
  display: flex;
  align-items: center;
  background: rgba(5, 15, 40, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* Top separator: 2px teal gradient line, bright in the center, fading to
   transparent on both edges (matches the live beyondgenomix.com footer line) */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(30, 200, 200, 0.5) 50%,
    transparent 100%
  );
}
/* Match the header content width exactly: full width with 55px side margins */
.site-footer .container {
  max-width: none;
  width: 100%;
  padding-inline: 55px;
}
@media (max-width: 768px) {
  .site-footer .container {
    padding-inline: 24px;
  }
}
.footer__row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  width: 100%;
}
.footer__nav {
  display: flex;
  gap: var(--space-6);
}
.footer__nav a {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
.footer__nav a:hover {
  color: var(--color-primary);
}
.footer__brand svg,
.footer__brand img {
  height: 40px;
  width: auto;
  display: block;
  margin-bottom: var(--space-4);
}
.footer__brand p {
  color: var(--color-text-faint);
  font-size: var(--text-sm);
  max-width: 36ch;
}
.footer__links {
  display: flex;
  gap: var(--space-10);
  flex-wrap: wrap;
}
.footer__col h4 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}
.footer__col a {
  display: block;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}
.footer__col a:hover {
  color: var(--color-primary);
}
.footer__copy {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 0.18em;
  color: #fff;
  margin-left: auto;
}
.footer__social {
  display: flex;
  gap: var(--space-4);
}
.footer__social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-primary);
}
.footer__social a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ============ SCROLL REVEAL ============ */
.reveal {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in {
  opacity: 1;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .science-intro__grid,
  .atlas__card,
  .clinical-card {
    grid-template-columns: 1fr;
  }
  .sci-split,
  .sci-split--text-left,
  .sci-split--text-right {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  /* On mobile, always show the visual AFTER the text for a consistent reading flow,
     even when it sits first in the DOM (Scientific Focus / Platform). */
  .sci-split--visual-first .sci-split__visual {
    order: 2;
  }
  .sci-split--visual-first .sci-split__text {
    order: 1;
  }
  .pillars {
    grid-template-columns: 1fr 1fr;
  }
  .pillars--three {
    grid-template-columns: 1fr;
  }
  .pillars--four {
    grid-template-columns: 1fr 1fr;
  }
  .nav__links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(80vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--space-16) var(--space-10);
    background: rgba(5, 15, 40, 0.97);
    backdrop-filter: blur(18px);
    transform: translateX(100%);
    transition: transform var(--transition-interactive);
    border-left: 1px solid var(--color-border);
  }
  .nav__links.open {
    transform: none;
  }
  .nav__links a {
    font-size: var(--text-lg);
  }
  .nav__toggle {
    display: grid;
    place-items: center;
    z-index: 110;
  }
  .science-intro__grid .cell-stage {
    max-width: 460px;
    margin-inline: auto;
  }
}

/* Interline mobile section padding (<=980px): 50px 0 */
@media (max-width: 980px) {
  .whoweare-section,
  .quote-pad,
  .news-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
@media (max-width: 560px) {
  .footer__top {
    flex-direction: column;
  }
  .pillars--four {
    grid-template-columns: 1fr;
  }
}

/* ============ NEWS PAGE (dedicated) ============ */
.newspage-section {
  padding-top: 97px;
  padding-bottom: 97px;
}
.newspage__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.newspage__item {
  display: flex;
  flex-direction: column;
  padding: 40px 0;
  border-bottom: 1px solid rgba(30, 200, 200, 0.18);
  max-width: none;
}
.newspage__item:first-child {
  padding-top: 0;
}
/* Eyebrow: source / place — small turquoise uppercase, like home news date */
.newspage__source {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  line-height: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 12px;
}
/* Title: the headline — 21px white, golden-ratio consistent with home news */
.newspage__title {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 21px;
  line-height: 30px;
  letter-spacing: 0;
  color: rgb(255, 255, 255);
  text-decoration: none;
  transition: color 0.4s cubic-bezier(0.17, 0.17, 0.41, 1);
}
a.newspage__title:hover,
a.newspage__title:focus-visible {
  color: var(--color-primary);
}
/* Date: small italic, under the title */
.newspage__date {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 11px;
  line-height: 18px;
  letter-spacing: 0;
  color: var(--color-primary);
  margin: 14px 0 0;
}

/* News page: Load More */
.newspage__item.is-hidden {
  display: none;
}
.newspage__morewrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 56px;
}
.newspage__loadmore {
  cursor: pointer;
}
.newspage__morewrap.is-done {
  display: none;
}

/* ============ CONNECT — Part 2 (split editorial) ============ */
.connect-section { padding-top: 97px; padding-bottom: 97px; }
.connect-wrap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 96px;
  align-items: start;
}
.connect-eyebrow {
  font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--color-primary);
}
.connect-left .connect-h {
  font-family: 'Poppins', sans-serif; font-weight: 300; color: #fff;
  font-size: 35px; line-height: 42px; letter-spacing: 0; margin: 18px 0 28px;
}
.connect-intro {
  font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 18px;
  line-height: 30px; color: rgb(245, 245, 245); max-width: 34ch;
}
.connect-contacts { margin-top: 48px; display: flex; flex-direction: column; gap: 26px; }
.connect-cline .k {
  font-family: 'Poppins', sans-serif; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-primary); margin-bottom: 6px;
}
.connect-cline a, .connect-cline p {
  font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 18px; line-height: 30px; color: #fff;
}
.connect-cline a:hover { color: var(--color-primary); }
.connect-cline .dir {
  display: inline-block; margin-top: 6px; font-style: italic;
  color: var(--color-primary); font-size: 16px;
}

.connect-form { display: flex; flex-direction: column; gap: 34px; }
.connect-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.connect-field label {
  display: block; font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 10px;
}
.connect-field input, .connect-field textarea {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid rgba(159,180,207,.28); color: #fff;
  font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 18px; line-height: 30px;
  padding: 8px 0 14px; outline: none; transition: border-color .35s ease;
}
.connect-field textarea { resize: none; min-height: 306px; line-height: 30px; }
.connect-field input::placeholder, .connect-field textarea::placeholder { color: rgba(159,180,207,.45); }
.connect-field input:focus, .connect-field textarea:focus { border-bottom-color: var(--color-primary); }
.connect-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 24px; border-radius: 12px;
  background: rgba(30, 200, 200, 0.30); color: #fff;
  font-family: 'Poppins', sans-serif; font-style: italic; font-weight: 400; font-size: 16px; line-height: 28px;
  border: none; cursor: pointer; transition: all 0.5s cubic-bezier(0.17, 0.17, 0.41, 1);
}
.connect-submit:hover { background: var(--color-primary); color: #fff; }

@media (max-width: 860px) {
  .connect-wrap { grid-template-columns: 1fr; gap: 56px; }
  .connect-grid2 { grid-template-columns: 1fr; }
  .connect-left .connect-h { font-size: 28px; }
}

/* ============ CAREERS — Part 2 (Manifesto + 3-step rail) ============ */
.careers-section { padding-top: 97px; padding-bottom: 97px; position: relative; overflow: hidden; }
.careers__glow {
  position: absolute; width: 680px; height: 680px; border-radius: 50%;
  background: radial-gradient(circle, rgba(30,200,200,.10), transparent 65%);
  top: -160px; right: -180px; pointer-events: none;
}
.careers__eyebrow {
  font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--color-primary);
}
.careers__manifesto {
  max-width: 24ch; font-family: 'Poppins', sans-serif; font-weight: 300;
  font-size: 35px; line-height: 42px; letter-spacing: 0; color: #fff; margin: 18px 0 0;
  text-transform: uppercase;
}
.careers__manifesto em { font-style: normal; color: var(--color-primary); }
.careers__lead {
  margin: 34px 0 0; max-width: none; font-family: 'Poppins', sans-serif; font-weight: 300;
  font-size: 18px; line-height: 30px; color: #F5F5F5; text-align: justify; hyphens: none;
}
.careers__rail {
  margin-top: 72px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid rgba(159,180,207,.18);
}
.careers__step { padding: 34px 36px 34px 0; border-right: 1px solid rgba(159,180,207,.12); }
.careers__step:last-child { border-right: none; }
.careers__step .n { font-family: 'Inconsolata', monospace; font-size: 13px; letter-spacing: .1em; color: var(--color-primary); }
.careers__step h3 {
  font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 21px; color: #fff;
  margin: 14px 0 8px; text-transform: uppercase; letter-spacing: .01em;
}
.careers__step p { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 18px; line-height: 30px; color: #9fb4cf; margin: 0; }
.careers__apply { margin-top: 64px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.careers__apply .ap-t { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 21px; line-height: 30px; color: #fff; }
.careers__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 24px; border-radius: 12px; background: rgba(30,200,200,.30); color: #fff;
  font-family: 'Poppins', sans-serif; font-style: italic; font-weight: 400; font-size: 16px; line-height: 28px;
  border: none; text-decoration: none; transition: all .5s cubic-bezier(.17,.17,.41,1);
}
.careers__cta:hover { background: var(--color-primary); color: #fff; }

@media (max-width: 860px) {
  .careers__manifesto { font-size: 28px; line-height: 36px; }
  .careers__rail { grid-template-columns: 1fr; }
  .careers__step { border-right: none; border-bottom: 1px solid rgba(159,180,207,.12); padding: 26px 0; }
}

.careers__subline {
  margin: 14px 0 0; font-family: 'Poppins', sans-serif; font-weight: 300; font-style: italic;
  font-size: 21px; line-height: 30px; color: var(--color-primary);
}

.connect-formmsg {
  margin: 4px 0 0; font-family: 'Poppins', sans-serif; font-weight: 300;
  font-size: 16px; line-height: 26px;
}
.connect-formmsg.is-ok { color: var(--color-primary); }
.connect-formmsg.is-error { color: #ff8a8a; }

/* ============ MISSION PAGE — more breathing room (Interline-style) ============ */
/* Lead statement: generous space above and below so it stands alone */
.mission-lead { padding-block: 24px; }
/* Mission + Vision: same vertical rhythm as the home page (97px top & bottom). */
.mission-statements { padding-top: 97px !important; padding-bottom: 97px !important; }
/* We Value: same 97px top & bottom as every other section. */
.values-section { padding-top: 97px !important; padding-bottom: 97px !important; }
.values-section .whoweare__stack { margin-bottom: 28px; }
.values-list { margin-top: 64px; gap: 72px; }
/* lead section itself a touch more open top/bottom */
.mission-lead__line { line-height: 38px; }

/* ============================================================
   Hover light-up + lift on the two remaining animation frames
   (Clinical Translation viz + the cell-stage on "A New Clinical
   Dimension"), matching the Scientific Focus pillar hover.
   ============================================================ */
.clinical-card,
.clinical-card__viz,
.sci-split__visual .cell-stage {
  transition: border-color var(--transition-interactive),
              transform var(--transition-interactive),
              box-shadow var(--transition-interactive);
}
.clinical-card:hover,
.sci-split__visual:hover .cell-stage {
  border-color: rgba(30, 200, 200, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(5, 15, 40, 0.6);
}
/* Inner animation frame also lights up when hovering the Clinical card */
.clinical-card:hover .clinical-card__viz {
  border-color: rgba(30, 200, 200, 0.4);
  box-shadow: 0 14px 38px rgba(5, 15, 40, 0.5);
}

/* ------------------------------------------------------------
   Rhythm harmonisation for the "A New Clinical Dimension" split
   text column: its narrow width made the %-based margins collapse
   to ~14.75px, out of sync with the full-width sections (~29.7px).
   Pin the title + inter-paragraph spacing to the same fixed rhythm.
   (The last paragraph keeps its -3px optical bottom alignment.)
   ------------------------------------------------------------ */
.sci-split--equalheight .sci-split__text .whoweare__title {
  margin-bottom: 30px;
}
.sci-split--equalheight .sci-split__text p {
  margin-bottom: 30px;
}
.sci-split--equalheight .sci-split__text p:last-child {
  margin-bottom: -3px;
}

/* ============================================================
   UNIVERSAL VERTICAL RHYTHM — every content section across the
   whole site gets EXACTLY 97px between its top edge and its first
   line of text, and 97px between its last line and its bottom edge
   (= the footer height). The section padding is already 97px; here
   we simply cancel the first child's top margin and the last child's
   bottom margin inside each section's inner container so stray
   element margins can't add to (or subtract from) that 97px.
   This makes Science / Mission / Careers / Connect / News match the
   home page exactly.
   ============================================================ */
.whoweare-section > .container > * > :first-child,
.whoweare-section > .container > :first-child,
.mission-statements > .container > * > :first-child,
.mission-statements > .container > :first-child,
.values-section > .container > * > :first-child,
.values-section > .container > :first-child,
.careers-section > .container > * > :first-child,
.careers-section > .container > :first-child,
.connect-section > .container > * > :first-child,
.connect-section > .container > :first-child,
.news-section > .container > * > :first-child,
.news-section > .container > :first-child {
  margin-top: 0 !important;
}
.whoweare-section > .container > * > :last-child,
.whoweare-section > .container > :last-child,
.mission-statements > .container > * > :last-child,
.mission-statements > .container > :last-child,
.values-section > .container > * > :last-child,
.values-section > .container > :last-child,
.careers-section > .container > * > :last-child,
.careers-section > .container > :last-child,
.connect-section > .container > * > :last-child,
.connect-section > .container > :last-child,
.news-section > .container > * > :last-child,
.news-section > .container > :last-child {
  margin-bottom: 0 !important;
}

/* ============================================================
   FOLLOW THE HOME PAGE — make the FIRST line of text sit 97px
   below each section's top edge and the LAST line sit 97px above
   the bottom edge, EXACTLY like index.html, even when the text is
   nested inside cards / split columns / lead wrappers that carry
   their own inner padding or optical margins. We zero those inner
   top/bottom contributions so only the section's 97px padding
   remains. (Horizontal padding of cards is untouched.)
   ============================================================ */

/* 1) Kill optical negative margins on the Science split title/last line
      (they made the gap read as 87/94 instead of 97). */
.sci-split--equalheight .sci-split__text .whoweare__title,
.sci-split .sci-split__text .whoweare__title {
  margin-top: 0 !important;
}
.sci-split .sci-split__text p:last-child {
  margin-bottom: 0 !important;
}

/* 2) Mission lead wrapper added 24px top+bottom on top of the 97px. Remove it. */
.mission-statements .mission-lead { padding-block: 0 !important; }

/* 3) The section's 97px vertical padding is measured to the FIRST/LAST
      direct child (card or text block). Only collapse stray MARGINS of
      those direct children so the 97px is exact. Cards keep their own
      internal padding so text breathes inside the rectangle. */
.whoweare-section > .container > :first-child {
  margin-top: 0 !important;
}
.whoweare-section > .container > :last-child {
  margin-bottom: 0 !important;
}

/* ===== Hero title anti-snap gate =====
   The hero <h1> is sized by JS (fitHeroTitle) AFTER first layout. To avoid the
   visible jump from default size to fitted size (the "photo capture" flash on
   load), we hold it invisible until JS adds .is-fitted, then fade it in once. */
/* Only the HOME two-line hero (.hero__line1) needs JS fitting, so only IT gets
   the anti-snap gate. Inner-page heroes (single word: SCIENCE, MISSION...) are
   never resized by JS -> they must appear INSTANTLY, no fade, no effect. */
.hero h1:has(.hero__line1) {
  opacity: 0;
  transition: opacity 0.45s ease;
  /* Safety: if JS never runs, reveal anyway so text is never permanently hidden. */
  animation: heroFitFallback 0s linear 1.2s forwards;
}
.hero h1:has(.hero__line1).is-fitted {
  opacity: 1;
  animation: none;
}
@keyframes heroFitFallback { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero h1:has(.hero__line1) { transition: none; }
}

/* Careers rail: Purpose / Curiosity / Together titles in fluo turquoise */
.careers__step h3 {
  color: var(--color-primary);
  text-shadow: 0 0 8px rgba(9, 204, 190, 0.45);
}

/* ============================================================
   MISSION / VISION — cascading reveal (logo removed)
   Each statement reveals eyebrow -> body; Mission leads, Vision follows.
   Hooks onto the existing .reveal.in IntersectionObserver.
   ============================================================ */
.mission-statement .mission-statement__eyebrow,
.mission-statement .mission-statement__body {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.mission-statement.in .mission-statement__eyebrow,
.mission-statement.in .mission-statement__body {
  opacity: 1;
  transform: none;
}
/* Stagger: Mission eyebrow -> Mission body -> Vision eyebrow -> Vision body */
.mission-statement--mission.in .mission-statement__eyebrow { transition-delay: 0.10s; }
.mission-statement--mission.in .mission-statement__body    { transition-delay: 0.35s; }
.mission-statement--vision.in  .mission-statement__eyebrow { transition-delay: 0.95s; }
.mission-statement--vision.in  .mission-statement__body    { transition-delay: 1.20s; }
@media (prefers-reduced-motion: reduce) {
  .mission-statement .mission-statement__eyebrow,
  .mission-statement .mission-statement__body {
    opacity: 1; transform: none; transition: none;
  }
}

/* ============================================================
   MISSION / VISION — central orb that lights up
   Sits between Mission and Vision. Stays dim, then ignites
   (turquoise glow + soft pulse) once both statements revealed.
   ============================================================ */
.mission-orb {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
}
.mission-orb__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(9,204,190,1) 0%, rgba(79,227,224,0.95) 45%, rgba(9,204,190,0) 75%);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.7,.2,1);
  transition-delay: 1.6s; /* lights up after both texts have appeared */
}
.mission-orb.in .mission-orb__dot {
  opacity: 1;
  transform: scale(1);
  animation: mission-orb-pulse 3.2s ease-in-out 2.5s infinite;
}
@keyframes mission-orb-pulse {
  0%, 100% { filter: drop-shadow(0 0 7px rgba(9,204,190,0.55)); transform: scale(0.92); }
  50%      { filter: drop-shadow(0 0 18px rgba(9,204,190,0.95)) drop-shadow(0 0 34px rgba(79,227,224,0.65)); transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .mission-orb__dot { opacity: 1; transform: none; transition: none; animation: none; }
}

/* ===== Anti-copy + turquoise selection on inputs ===== */
body{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
/* Allow typing + selection only inside form fields */
input, textarea, select, [contenteditable="true"]{
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
}
/* Turquoise selection — only visible where selection is allowed (form fields) */
input::selection, textarea::selection, [contenteditable="true"]::selection{
  background:#09CCBE;
  color:#04201E;
}
input::-moz-selection, textarea::-moz-selection, [contenteditable="true"]::-moz-selection{
  background:#09CCBE;
  color:#04201E;
}