/* ==========================================================================
   ARCADIA — SCIENCE LAYER
   Depth, imagery and motion on top of the base design system.
   Loaded after style.css.
   ========================================================================== */

:root {
  --gfx-accent: #34a06f;
  --gfx-glow:   #7ff0b6;
  --gfx-line:   rgba(111, 195, 154, .22);
  --gfx-ink:    #d9ece2;

  --dark-bg:    #05201a;
  --dark-bg-2:  #072a20;
  --dark-line:  rgba(169, 220, 195, .14);
}

/* ==========================================================================
   1. DARK SURFACE — the instrument aesthetic
   ========================================================================== */

.surface-dark {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(52,160,111,.20), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(35,136,93,.18), transparent 62%),
    linear-gradient(168deg, var(--dark-bg) 0%, var(--dark-bg-2) 55%, #04180f 100%);
  color: var(--g-100);
  overflow: hidden;
}
.surface-dark h1, .surface-dark h2, .surface-dark h3, .surface-dark h4 { color: #fff; }
.surface-dark .lede { color: var(--g-200); }
.surface-dark p { color: #b9d6c7; }
.surface-dark .eyebrow { color: var(--g-300); }
.surface-dark .eyebrow::before { background: var(--g-400); }
.surface-dark a { color: var(--g-200); }
.surface-dark a:hover { color: #fff; }

/* Buttons must not inherit the dark-surface link colour. Without these the
   `.surface-dark a` rule out-specifies `.btn--light`, painting pale green text
   on a white button — about 1.6:1 contrast, i.e. unreadable. */
.surface-dark a.btn--light,
.surface-dark a.btn--light:hover { color: var(--g-900); }
.surface-dark a.btn--primary,
.surface-dark a.btn--primary:hover { color: #fff; }
.surface-dark a.btn--outline-light,
.surface-dark a.btn--outline-light:hover { color: #fff; }
.surface-dark a.btn--ghost {
  color: #fff; border-color: rgba(169,220,195,.3);
}
.surface-dark a.btn--ghost:hover {
  color: #fff; background: rgba(255,255,255,.08); border-color: rgba(169,220,195,.55);
}

/* Fine engineering grid over dark surfaces */
.surface-dark::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--dark-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--dark-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 15%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 15%, transparent 80%);
  opacity: .5;
}
.surface-dark > * { position: relative; z-index: 1; }

/* Film grain — stops large dark fields looking flat/banded */
.grain::after {
  content: "";
  position: absolute; inset: -50%; z-index: 2; pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  .grain::after { animation: grain-shift 700ms steps(3) infinite; }
}
@keyframes grain-shift {
  0%   { transform: translate(0,0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0,0); }
}

/* ==========================================================================
   2. HERO — layered, moving
   ========================================================================== */

.hero--science {
  position: relative;
  padding-block: clamp(5rem, 3rem + 10vw, 11rem) clamp(4rem, 2rem + 8vw, 8rem);
  min-height: min(92vh, 900px);
  display: flex; align-items: center;
}
.hero--science .hero__title { color: #fff; }
.hero--science .hero__title em {
  font-style: normal;
  background: linear-gradient(96deg, var(--g-300) 0%, var(--gfx-glow) 45%, var(--g-200) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero--science .hero__lede { color: #b9d6c7; }

.hero-stack { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.hero-particles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }

/* Slow-drifting light sources */
.hero-orb {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .38;
}
.hero-orb--a {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  left: -8vw; top: -12vw;
  background: radial-gradient(circle, rgba(52,160,111,.85), transparent 70%);
}
.hero-orb--b {
  width: 38vw; height: 38vw; max-width: 520px; max-height: 520px;
  right: -6vw; bottom: -14vw;
  background: radial-gradient(circle, rgba(127,240,182,.55), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-orb--a { animation: orb-a 19s ease-in-out infinite alternate; }
  .hero-orb--b { animation: orb-b 23s ease-in-out infinite alternate; }
}
@keyframes orb-a { to { transform: translate3d(6vw, 4vw, 0) scale(1.14); opacity: .5; } }
@keyframes orb-b { to { transform: translate3d(-5vw, -3vw, 0) scale(1.1); opacity: .3; } }

/* Hex/lattice mesh */
.hero-mesh {
  position: absolute; inset: 0; opacity: .16;
  background-image:
    linear-gradient(30deg, transparent 47%, var(--g-400) 47.5%, var(--g-400) 48%, transparent 48.5%),
    linear-gradient(-30deg, transparent 47%, var(--g-400) 47.5%, var(--g-400) 48%, transparent 48.5%);
  background-size: 46px 80px;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000, transparent 70%);
}

/* Detector scan line sweeping the hero */
.hero-scan {
  position: absolute; left: 0; right: 0; height: 220px; top: -220px;
  background: linear-gradient(180deg, transparent, rgba(127,240,182,.10) 45%, rgba(127,240,182,.16) 50%, transparent);
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-scan { animation: scan 7.5s linear infinite; }
}
@keyframes scan { to { transform: translateY(calc(100vh + 440px)); } }

.hero-chrom {
  position: absolute; left: 0; right: 0; bottom: -1%;
  height: clamp(160px, 22vw, 300px);
  opacity: .42;
}
.hero-chrom .gfx, .hero-chrom svg { height: 100%; width: 100%; }
.hero-mol {
  position: absolute; right: -4%; top: 12%;
  width: min(46%, 560px); opacity: .3;
}
.hero-grain { position: absolute; inset: 0; }
.hero-grain::after {
  content: ""; position: absolute; inset: -50%; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hero stat strip, dark treatment */
.hero--science .hero-stats {
  background: rgba(255,255,255,.07);
  border-color: rgba(169,220,195,.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero--science .hero-stat {
  background: rgba(6,32,24,.55);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.hero--science .hero-stat:hover { background: rgba(10,52,38,.75); transform: translateY(-2px); }
.hero--science .hero-stat__label { color: var(--g-300); }
.hero--science .hero-stat__value { color: #fff; }

/* Dark interior page hero */
.page-hero--science {
  border-bottom: 1px solid rgba(169,220,195,.14);
  padding-block: clamp(3.5rem, 2rem + 7vw, 7rem) clamp(3rem, 2rem + 5vw, 5.5rem);
}
.page-hero--science .crumbs { color: rgba(169,220,195,.55); }
.page-hero--science .crumbs a { color: var(--g-300); }
.page-hero--science .crumbs a:hover { color: #fff; }
.page-hero--science .crumbs span { color: rgba(169,220,195,.3); }
.page-hero--science .page-hero__title { color: #fff; }
.page-hero--science .prose p,
.page-hero--science .prose li { color: #b9d6c7; }
.page-hero--science .prose strong { color: #fff; }
.page-hero--science .hero-stack { z-index: 0; }
.page-hero--science .hero-orb--a { opacity: .3; }

/* ==========================================================================
   3. FIGURES — shared chrome
   ========================================================================== */

.gfx { margin: 0; position: relative; }
.gfx svg { width: 100%; height: auto; display: block; overflow: visible; }

.gfx-grid line { stroke: var(--gfx-line); stroke-width: 1; }
.gfx-axis { stroke: rgba(169,220,195,.42); stroke-width: 1.25; }
.gfx--light .gfx-grid line { stroke: rgba(20,82,58,.13); }
.gfx--light .gfx-axis { stroke: rgba(20,82,58,.3); }

.gfx-label {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em;
  fill: var(--g-300);
}
.gfx-label--major { fill: var(--gfx-glow); font-weight: 500; }
.gfx--light .gfx-label { fill: var(--g-600); }
.gfx--light .gfx-label--major { fill: var(--g-700); }

.gfx-axis-label {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .18em;
  fill: rgba(169,220,195,.55);
}
.gfx--light .gfx-axis-label { fill: var(--ink-4); }

.gfx-leader { stroke: var(--gfx-line); stroke-width: 1; stroke-dasharray: 2 3; }

/* --- chromatogram --- */
.gfx-trace {
  fill: none; stroke: var(--gfx-glow); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.gfx--light .gfx-trace { stroke: var(--g-600); }

.gfx-trace-glow {
  fill: none; stroke: var(--gfx-accent); stroke-width: 5; opacity: .55;
  vector-effect: non-scaling-stroke;
}
.gfx--light .gfx-trace-glow { opacity: .25; }

.gfx-sweep {
  fill: none; stroke-width: 3.5; opacity: 0;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 90 3000;
}

@media (prefers-reduced-motion: no-preference) {
  .gfx--chromatogram.is-live .gfx-trace,
  .gfx--chromatogram.is-live .gfx-trace-glow {
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    animation: chrom-draw 4.5s var(--ease) forwards;
  }
  .gfx--chromatogram.is-live .gfx-fill {
    opacity: 0; animation: chrom-fade 2.4s var(--ease) 1.6s forwards;
  }
  .gfx--chromatogram.is-live .gfx-annot {
    opacity: 0; animation: chrom-fade 1.2s var(--ease) 3.1s forwards;
  }
  .gfx--chromatogram.is-live .gfx-sweep {
    opacity: 1; animation: chrom-sweep 4.5s linear infinite 4.6s;
  }
  /* Ambient (hero) copy loops forever and never shows annotations. */
  .gfx--ambient .gfx-trace {
    stroke-dasharray: 3000; stroke-dashoffset: 3000;
    animation: chrom-loop 14s ease-in-out infinite;
  }
}
@keyframes chrom-draw  { to { stroke-dashoffset: 0; } }
@keyframes chrom-fade  { to { opacity: 1; } }
@keyframes chrom-sweep { from { stroke-dashoffset: 3000; } to { stroke-dashoffset: 0; } }
@keyframes chrom-loop {
  0%   { stroke-dashoffset: 3000; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -3000; }
}

/* --- mass spectrum --- */
.gfx-stick line {
  stroke: var(--gfx-glow); stroke-width: 3; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.gfx-stick circle { fill: var(--gfx-glow); }
.gfx-stick.is-base line { stroke: #fff; stroke-width: 4; }
.gfx-stick.is-base circle { fill: #fff; }
.gfx--light .gfx-stick line { stroke: var(--g-500); }
.gfx--light .gfx-stick circle { fill: var(--g-500); }
.gfx--light .gfx-stick.is-base line,
.gfx--light .gfx-stick.is-base circle { stroke: var(--g-800); fill: var(--g-800); }

@media (prefers-reduced-motion: no-preference) {
  .gfx--spectrum.is-live .gfx-stick {
    transform-origin: center bottom;
    transform-box: fill-box;
    animation: stick-rise .75s var(--ease) both;
    animation-delay: calc(var(--i) * 90ms);
  }
  .gfx--spectrum.is-live .gfx-stick.is-base {
    animation: stick-rise .75s var(--ease) both, stick-pulse 2.6s ease-in-out infinite 1.6s;
  }
}
@keyframes stick-rise  { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes stick-pulse { 50% { filter: drop-shadow(0 0 8px rgba(127,240,182,.85)); } }

/* --- 96-well plate --- */
.plate { width: 100%; }
.plate__legend {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-bottom: 1.25rem;
  font-family: var(--ff-mono); font-size: var(--fs-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--g-300);
}
.gfx--light .plate__legend { color: var(--ink-3); }
.plate__legend span { display: inline-flex; align-items: center; gap: .45rem; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot--std    { background: #7ff0b6; }
.dot--sample { background: #34a06f; }
.dot--ppc    { background: #ffd479; }
.dot--blank  { background: rgba(169,220,195,.3); border: 1px solid rgba(169,220,195,.5); }

.plate__grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(4px, .7vw, 9px);
  padding: clamp(10px, 1.4vw, 18px);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(169,220,195,.16);
  border-radius: 10px;
}
.gfx--light .plate__grid { background: var(--paper-2); border-color: var(--line); }

.well {
  aspect-ratio: 1; border-radius: 50%;
  background: rgba(169,220,195,.10);
  border: 1px solid rgba(169,220,195,.22);
  display: block;
}
.gfx--light .well { background: #fff; border-color: var(--line-2); }

@media (prefers-reduced-motion: no-preference) {
  .gfx--plate.is-live .well { animation: well-develop 5.5s ease-in-out infinite; animation-delay: var(--d); }
  .gfx--plate.is-live .well--blank { animation: none; }
}
@keyframes well-develop {
  0%, 12%  { background: rgba(169,220,195,.10); box-shadow: none; }
  45%, 72% { background: #7ff0b6; box-shadow: 0 0 12px rgba(127,240,182,.6); }
  100%     { background: rgba(169,220,195,.10); box-shadow: none; }
}
.well--ppc { border-color: rgba(255,212,121,.6); }
.gfx--plate.is-live .well--ppc { animation-name: well-develop-ppc; }
@keyframes well-develop-ppc {
  0%, 12%  { background: rgba(255,212,121,.12); }
  45%, 72% { background: #ffd479; box-shadow: 0 0 12px rgba(255,212,121,.55); }
  100%     { background: rgba(255,212,121,.12); }
}
.plate__caption, .elements__caption {
  margin-top: 1.1rem; font-size: var(--fs-xs); color: rgba(169,220,195,.75); line-height: 1.6;
}
.gfx--light .plate__caption, .gfx--light .elements__caption { color: var(--ink-3); }

/* --- element grid --- */
.elements__legend {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem;
}
.elclass {
  font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .12em;
  text-transform: uppercase; padding: .3rem .6rem; border-radius: 3px;
}
.elclass--1  { background: rgba(255,138,138,.16); color: #ffb3b3; }
.elclass--2a { background: rgba(255,212,121,.16); color: #ffd479; }
.elclass--2b { background: rgba(127,240,182,.14); color: #7ff0b6; }
.elclass--3  { background: rgba(169,220,195,.12); color: #a9dcc3; }
.gfx--light .elclass--1  { background: #fde7e7; color: #a33; }
.gfx--light .elclass--2a { background: #fdf2d9; color: #8a6a1a; }
.gfx--light .elclass--2b { background: var(--g-100); color: var(--g-700); }
.gfx--light .elclass--3  { background: var(--paper-3); color: var(--ink-3); }

.elements__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: clamp(5px, .7vw, 9px);
}
.el {
  position: relative; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 7px; border: 1px solid rgba(169,220,195,.18);
  background: rgba(255,255,255,.04);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  cursor: default;
}
.gfx--light .el { background: #fff; border-color: var(--line); }
.el b {
  font-family: var(--ff-sans); font-size: clamp(1rem, .85rem + .5vw, 1.35rem);
  font-weight: 600; color: #fff; line-height: 1;
}
.gfx--light .el b { color: var(--ink); }
.el em {
  font-family: var(--ff-mono); font-style: normal; font-size: 9px;
  letter-spacing: .1em; margin-top: .3rem; color: rgba(169,220,195,.7);
}
.gfx--light .el em { color: var(--ink-4); }
.el:hover { transform: translateY(-3px); box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); border-color: var(--g-400); }

.el--1 { border-color: rgba(255,138,138,.45); background: rgba(255,138,138,.10); }
.el--1 b { color: #ffd9d9; }
.gfx--light .el--1 { background: #fdf0f0; border-color: #f0c9c9; }
.gfx--light .el--1 b { color: #8a2020; }
.el--2a { border-color: rgba(255,212,121,.35); }
.el--2b { border-color: rgba(127,240,182,.3); }

@media (prefers-reduced-motion: no-preference) {
  .gfx--elements.is-live .el {
    opacity: 0; transform: translateY(10px) scale(.94);
    animation: el-in .5s var(--ease) both;
    animation-delay: calc(var(--i) * 38ms);
  }
  .gfx--elements.is-live .el--1 {
    animation: el-in .5s var(--ease) both, el-flag 3.2s ease-in-out infinite 1.6s;
  }
}
@keyframes el-in   { to { opacity: 1; transform: none; } }
@keyframes el-flag { 50% { box-shadow: 0 0 0 3px rgba(255,138,138,.18); } }

/* --- molecule --- */
.gfx--molecule svg { overflow: visible; }
.mol-bond {
  fill: none; stroke: var(--g-300); stroke-width: 1.6; opacity: .8;
  vector-effect: non-scaling-stroke; stroke-linecap: round;
}
.mol-bond--side { opacity: .45; }
.mol-atom { fill: var(--g-200); }
.mol-atom--o { fill: var(--gfx-glow); }
.mol-atom--c { fill: #fff; }
.mol-atom--r { fill: var(--g-400); }

@media (prefers-reduced-motion: no-preference) {
  .gfx--molecule .mol-bond {
    stroke-dasharray: 1400; stroke-dashoffset: 1400;
    animation: mol-draw 6s var(--ease) infinite alternate;
  }
  .gfx--molecule .mol-atom {
    animation: mol-pulse 3.4s ease-in-out infinite;
    animation-delay: calc(var(--i) * 130ms);
  }
}
@keyframes mol-draw  { to { stroke-dashoffset: 0; } }
@keyframes mol-pulse { 50% { opacity: .45; transform: scale(1.25); } }
.gfx--molecule .mol-atom { transform-origin: center; transform-box: fill-box; }

/* --- divider --- */
.gfx-divider { line-height: 0; }
.gfx-divider svg { width: 100%; height: 40px; }
.gfx-divider line { stroke: var(--line); stroke-width: 1; }
.surface-dark .gfx-divider line { stroke: var(--dark-line); }
.gfx-divider__pulse { fill: var(--g-400); }
@media (prefers-reduced-motion: no-preference) {
  .gfx-divider__pulse { animation: divider-run 5s linear infinite; }
}
@keyframes divider-run {
  0%   { transform: translateX(0); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(1200px); opacity: 0; }
}

/* ==========================================================================
   4. READOUT STRIP
   ========================================================================== */

.readout {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  background: rgba(169,220,195,.14);
  border: 1px solid rgba(169,220,195,.16);
  border-radius: 8px; overflow: hidden;
  margin-top: 2.5rem;
}
.readout__cell { background: rgba(6,32,24,.72); padding: 1.1rem 1.25rem; }
.readout__k {
  display: block; font-family: var(--ff-mono); font-size: 9px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--g-400); margin-bottom: .35rem;
}
.readout__v {
  display: block; font-family: var(--ff-mono); font-size: 1.15rem; color: #fff;
  font-variant-numeric: tabular-nums;
}
.readout__v i { font-style: normal; font-size: .6em; color: var(--g-300); margin-left: .3em; }
.readout__bar { display: block; height: 2px; background: rgba(169,220,195,.16); margin-top: .7rem; border-radius: 2px; overflow: hidden; }
.readout__bar i { display: block; height: 100%; width: 40%; background: var(--gfx-glow); border-radius: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .readout__bar i { animation: bar-breathe 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * 420ms); }
}
@keyframes bar-breathe {
  0%,100% { width: 28%; opacity: .55; }
  50%     { width: 82%; opacity: 1; }
}

/* ==========================================================================
   5. RICHER CARDS
   ========================================================================== */

.card--rich {
  position: relative; overflow: hidden;
  background: linear-gradient(168deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border-color: rgba(169,220,195,.16);
  color: var(--g-200);
}
.card--rich .card__title { color: #fff; }
.card--rich .card__body { color: #a9c9b8; }
.card--rich .card__icon { color: var(--gfx-glow); }
.card--rich::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0;
  background: radial-gradient(420px 220px at var(--mx, 50%) var(--my, 0%), rgba(127,240,182,.16), transparent 68%);
  transition: opacity .35s var(--ease);
}
.card--rich:hover::before { opacity: 1; }
.card--rich > * { position: relative; z-index: 1; }
a.card--rich:hover {
  border-color: rgba(127,240,182,.45);
  box-shadow: 0 22px 44px -20px rgba(0,0,0,.7);
  transform: translateY(-4px);
}
.card--rich .arrow-link { color: var(--gfx-glow); }

/* Numbered accent on rich cards */
.card__index {
  position: absolute; top: 1rem; right: 1.25rem; z-index: 1;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .18em;
  color: rgba(169,220,195,.4);
}

/* ==========================================================================
   6. FIGURE + TEXT SPLIT
   ========================================================================== */

.split {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1.05fr; }
  .split--reverse .split__media { order: 2; }
}
.split__media { position: relative; }
.split__media::after {
  content: ""; position: absolute; inset: -8% -6%; z-index: -1;
  background: radial-gradient(closest-side, rgba(52,160,111,.16), transparent 75%);
  filter: blur(24px);
}

/* Frame each figure as an instrument panel. Without this a wide, short trace
   floats in a tall column and reads as an accident rather than a readout. */
.split__media .gfx,
.figure-band .gfx--panel {
  background: linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(169,220,195,.18);
  border-radius: 12px;
  padding: clamp(1.1rem, .7rem + 1.4vw, 2rem);
  box-shadow: 0 26px 50px -28px rgba(0,0,0,.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.gfx--light.gfx,
.split__media .gfx--light {
  background: #fff;
  border-color: var(--line);
  box-shadow: var(--shadow-md);
}

/* Panel header strip — a small instrument label above each figure. */
.split__media .gfx::before {
  content: attr(data-panel);
  display: block;
  font-family: var(--ff-mono); font-size: var(--fs-label);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--g-400);
  padding-bottom: .9rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid rgba(169,220,195,.14);
}
.split__media .gfx--light::before { color: var(--g-600); border-bottom-color: var(--line); }
.split__media .gfx:not([data-panel])::before { display: none; }

/* Give the short, wide chromatogram some vertical presence in a split. */
.split__media .gfx--chromatogram svg { min-height: 190px; }

/* ==========================================================================
   7. COUNTERS
   ========================================================================== */

.counter {
  font-family: var(--ff-sans); font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
  letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.counter__unit { font-size: .45em; color: var(--g-300); margin-left: .15em; }
.counter-grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  background: rgba(169,220,195,.14);
  border: 1px solid rgba(169,220,195,.16);
  border-radius: 10px; overflow: hidden;
}
.counter-cell { background: rgba(6,32,24,.6); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.counter-cell__label {
  font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .16em;
  text-transform: uppercase; color: var(--g-400); margin-top: .7rem;
}

/* ==========================================================================
   8. PARALLAX + REVEAL EXTRAS
   ========================================================================== */

[data-parallax] { will-change: transform; }

@media (prefers-reduced-motion: no-preference) {
  .js .reveal-scale { opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js .reveal-scale.is-in { opacity: 1; transform: none; }

  .js .reveal-left  { opacity: 0; transform: translateX(-26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js .reveal-right { opacity: 0; transform: translateX(26px);  transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js .reveal-left.is-in, .js .reveal-right.is-in { opacity: 1; transform: none; }
}
.reveal-scale, .reveal-left, .reveal-right { opacity: 1; transform: none; }

/* ==========================================================================
   9. CTA BAND — richer
   ========================================================================== */

.cta-band--science { background: none; }
.cta-band--science .cta-band__grid { opacity: .18; }

/* ==========================================================================
   10. SERVICE FIGURE BAND
   ========================================================================== */

.figure-band { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.figure-band .gfx { max-width: 100%; }

/* Light-tone figures sitting on paper sections */
.gfx--light .gfx-fill { opacity: .55; }

/* ==========================================================================
   11. MOBILE TRIMS — keep the motion budget sane on phones
   ========================================================================== */

@media (max-width: 700px) {
  .hero-mol { display: none; }
  .hero-mesh { opacity: .1; }
  .hero-particles { opacity: .35; }
  .elements__grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
  .plate__grid { gap: 3px; padding: 8px; }
}