/* =========================================================
   Sada Pharma — design system
   4 variations selectable via [data-variation]
   Dark/Light via [data-theme]
   Type via [data-type]
   Density via [data-density]
   ========================================================= */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
h1,h2,h3,h4,h5,h6,p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ---------- base tokens (Variation 1: Molecular Editorial — default) ---------- */
:root,
[data-variation="1"] {
  /* palette */
  --bg:            #0B1B2B;
  --bg-elev:       #0F2233;
  --bg-soft:       #14304A;
  --ink:           #EFEAE0;
  --ink-dim:       #B7C4D0;
  --ink-mute:      #6E8091;
  --line:          rgba(239, 234, 224, 0.12);
  --line-strong:   rgba(239, 234, 224, 0.28);
  --accent:        #7DE0E6;   /* electrolyte cyan */
  --accent-2:      #E8C56B;   /* trace gold */
  --danger:        #F26C5F;
  --success:       #77D6A6;

  /* type stack */
  --font-display: "Newsreader", "Cormorant Garamond", Georgia, serif;
  --font-sans:    "Instrument Sans", "Söhne", "Helvetica Neue", Helvetica, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* scale */
  --step--2: clamp(11px, 0.72rem + 0.05vw, 12px);
  --step--1: clamp(13px, 0.82rem + 0.1vw, 14px);
  --step-0:  clamp(15px, 0.95rem + 0.15vw, 17px);
  --step-1:  clamp(18px, 1.05rem + 0.35vw, 22px);
  --step-2:  clamp(22px, 1.25rem + 0.7vw, 30px);
  --step-3:  clamp(30px, 1.6rem + 1.4vw, 46px);
  --step-4:  clamp(42px, 2.2rem + 2.2vw, 72px);
  --step-5:  clamp(56px, 2.8rem + 4vw, 120px);
  --step-6:  clamp(72px, 3.4rem + 6vw, 168px);

  /* spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;
  --sp-9: 112px;
  --sp-10: 160px;

  /* radii */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-4: 22px;
  --r-full: 999px;

  /* shell */
  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1440px;
  --section-y: clamp(80px, 12vw, 160px);

  color-scheme: dark;
}

/* ---------- Variation 2: Clinical Minimal (light default) ---------- */
[data-variation="2"] {
  --bg:            #F6F4EF;
  --bg-elev:       #FFFFFF;
  --bg-soft:       #ECE8DF;
  --ink:           #131414;
  --ink-dim:       #45494C;
  --ink-mute:      #8B8F92;
  --line:          rgba(19, 20, 20, 0.10);
  --line-strong:   rgba(19, 20, 20, 0.28);
  --accent:        #1E56E3;   /* molecular blue */
  --accent-2:      #B0C7FF;
  --font-display: "Space Grotesk", "Söhne", sans-serif;
  --font-sans:    "Space Grotesk", "Söhne", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  color-scheme: light;
}

/* ---------- Variation 3: Warm Industrial ---------- */
[data-variation="3"] {
  --bg:            #EEE8DE;
  --bg-elev:       #F7F2E9;
  --bg-soft:       #E2DAC9;
  --ink:           #1B1712;
  --ink-dim:       #4A4239;
  --ink-mute:      #857B6E;
  --line:          rgba(27, 23, 18, 0.12);
  --line-strong:   rgba(27, 23, 18, 0.32);
  --accent:        #C8501E;   /* burnt orange */
  --accent-2:      #2E5A3E;   /* deep botanical */
  --font-display: "Bricolage Grotesque", "Söhne", sans-serif;
  --font-sans:    "IBM Plex Sans", "Söhne", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: light;
}

/* ---------- Variation 4: Corporate Premium Glass ---------- */
[data-variation="4"] {
  --bg:            #060B18;
  --bg-elev:       #0B1330;
  --bg-soft:       #131F45;
  --ink:           #EEF1FA;
  --ink-dim:       #B3BCD6;
  --ink-mute:      #6C7897;
  --line:          rgba(238, 241, 250, 0.10);
  --line-strong:   rgba(238, 241, 250, 0.24);
  --accent:        #6B8CFF;   /* photon indigo */
  --accent-2:      #E7D089;   /* pale gold */
  --font-display: "Instrument Serif", "Cormorant Garamond", serif;
  --font-sans:    "Geist", "Söhne", sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  color-scheme: dark;
}

/* ---------- Dark/Light override for V1/V4 (dark→light) and V2/V3 (light→dark) ---------- */
[data-theme="light"][data-variation="1"] {
  --bg:            #F3EFE7;
  --bg-elev:       #FFFFFF;
  --bg-soft:       #E7E0D2;
  --ink:           #0B1B2B;
  --ink-dim:       #3F5364;
  --ink-mute:      #7A8B99;
  --line:          rgba(11, 27, 43, 0.12);
  --line-strong:   rgba(11, 27, 43, 0.28);
  --accent:        #0B7A80;
  color-scheme: light;
}
[data-theme="dark"][data-variation="2"] {
  --bg:            #0E1013;
  --bg-elev:       #14171B;
  --bg-soft:       #1B1F25;
  --ink:           #F1EEE7;
  --ink-dim:       #C4C6CA;
  --ink-mute:      #7C8188;
  --line:          rgba(241, 238, 231, 0.10);
  --line-strong:   rgba(241, 238, 231, 0.26);
  --accent:        #6B93FF;
  color-scheme: dark;
}
[data-theme="dark"][data-variation="3"] {
  --bg:            #171310;
  --bg-elev:       #1F1A15;
  --bg-soft:       #2A2219;
  --ink:           #EEE6D6;
  --ink-dim:       #C0B39C;
  --ink-mute:      #857B6E;
  --line:          rgba(238, 230, 214, 0.12);
  --line-strong:   rgba(238, 230, 214, 0.28);
  color-scheme: dark;
}
[data-theme="light"][data-variation="4"] {
  --bg:            #F3F4F8;
  --bg-elev:       #FFFFFF;
  --bg-soft:       #E8EBF4;
  --ink:           #0B1330;
  --ink-dim:       #3D466A;
  --ink-mute:      #7783A0;
  --line:          rgba(11, 19, 48, 0.10);
  --line-strong:   rgba(11, 19, 48, 0.24);
  --accent:        #2743C6;
  color-scheme: light;
}

/* ---------- Type presets ---------- */
[data-type="serif"] {
  --font-display: "Newsreader", "Cormorant Garamond", Georgia, serif;
  --font-sans:    "Instrument Sans", sans-serif;
}
[data-type="grotesk"] {
  --font-display: "Space Grotesk", sans-serif;
  --font-sans:    "Space Grotesk", sans-serif;
}
[data-type="editorial"] {
  --font-display: "Instrument Serif", serif;
  --font-sans:    "Geist", sans-serif;
}
[data-type="industrial"] {
  --font-display: "Bricolage Grotesque", sans-serif;
  --font-sans:    "IBM Plex Sans", sans-serif;
}

/* ---------- Density ---------- */
[data-density="tight"] {
  --section-y: clamp(56px, 8vw, 112px);
  --sp-8: 48px;
  --sp-9: 72px;
  --sp-10: 112px;
}

/* ==================================================================
   BASE
   ================================================================== */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.55;
  overflow-x: clip;
  transition: background-color .4s ease, color .4s ease;
}

.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--section-y) 0;
  position: relative;
}

/* selection */
::selection { background: var(--accent); color: var(--bg); }

/* ==================================================================
   NAV
   ================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: var(--sp-4) 0;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--line);
  transition: background-color .3s ease, border-color .3s ease;
}
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6);
}
.brand {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  line-height: 1;
}
.brand-mark {
  width: 34px; height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  position: relative;
  display: grid; place-items: center;
  background: var(--bg-elev);
}
.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: .6;
}
.brand-mark::before { transform: scale(.62); border-color: var(--ink); opacity: .35; }
.brand-mark::after  { transform: scale(.35); background: var(--accent); border: 0; }

.brand-txt sub { display: block; font: 500 10px/1 var(--font-mono); letter-spacing: .14em; color: var(--ink-mute); text-transform: uppercase; margin-top: 4px; }

.nav-links {
  display: flex; gap: clamp(12px, 1.6vw, 26px);
  font-size: var(--step--1);
  color: var(--ink-dim);
}
.nav-links a { position: relative; padding: 6px 2px; transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--accent);
}

.nav-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  font-size: var(--step--1);
  color: var(--ink);
  transition: all .25s;
}
.nav-cta:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.nav-cta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent); }

.nav-burger { display: none; }

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger {
    display: inline-flex; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-full);
    font: 500 var(--step--1) var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  }
}

/* ==================================================================
   HERO
   ================================================================== */
.hero {
  position: relative;
  padding: clamp(48px, 6vw, 96px) 0 clamp(48px, 6vw, 80px);
  overflow: hidden;
  isolation: isolate;
}

/* variation 1&4 → dark molecular canvas backing */
.hero-canvas {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}

/* variation 3 warm industrial swaps to concrete grain */
[data-variation="3"] .hero-canvas { opacity: .25; filter: sepia(.35) contrast(1.05); }

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--sp-8);
  align-items: end;
  min-height: 78vh;
}
@media (max-width: 960px) { .hero-inner { grid-template-columns: 1fr; min-height: 0; gap: var(--sp-7); } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 var(--step--2)/1 var(--font-mono);
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute);
}
.eyebrow .line { width: 40px; height: 1px; background: var(--line-strong); }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-5);
  line-height: 0.96;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin-top: var(--sp-5);
}
.hero h1 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
[data-variation="2"] .hero h1,
[data-variation="3"] .hero h1 {
  font-weight: 500;
  letter-spacing: -0.04em;
}

.hero-lede {
  max-width: 46ch;
  color: var(--ink-dim);
  margin-top: var(--sp-5);
  font-size: var(--step-1);
  line-height: 1.45;
  text-wrap: pretty;
}

.hero-ctas { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; }

.btn {
  --pad-x: 20px; --pad-y: 14px;
  display: inline-flex; align-items: center; gap: 12px;
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--r-full);
  font: 500 var(--step-0) var(--font-sans);
  letter-spacing: -0.01em;
  transition: all .25s ease;
  border: 1px solid transparent;
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--accent); color: var(--bg); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn .arrow { transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* hero right rail — data card */
.hero-panel {
  position: relative;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg-elev) 88%, transparent);
  backdrop-filter: blur(12px);
  border-radius: var(--r-3);
  padding: var(--sp-5);
  align-self: end;
}
[data-variation="4"] .hero-panel {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--bg-soft) 60%, transparent),
    color-mix(in oklab, var(--bg-elev) 30%, transparent));
  border-color: var(--line-strong);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
}

.panel-title {
  display: flex; justify-content: space-between; align-items: center;
  font: 500 var(--step--2) var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: var(--sp-4);
}
.panel-title .live {
  display: inline-flex; align-items: center; gap: 6px; color: var(--accent);
}
.panel-title .live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 25%, transparent);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.75); }
}

.stat-list { display: grid; gap: 2px; }
.stat-row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px dashed var(--line);
}
.stat-row:last-child { border-bottom: 0; }
.stat-row .k { font: 500 var(--step--1) var(--font-mono); color: var(--ink-mute); letter-spacing: .1em; text-transform: uppercase; }
.stat-row .v { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; letter-spacing: -0.02em; }
.stat-row .v small { font-family: var(--font-mono); font-size: 0.4em; color: var(--ink-mute); margin-left: 6px; }

.cert-strip {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
}
.cert-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  font: 500 var(--step--2) var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim);
}
.cert-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* hero-scroll indicator */
.hero-marquee {
  position: relative; z-index: 2;
  margin-top: var(--sp-7);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero-marquee-inner {
  display: flex; gap: var(--sp-6);
  padding: var(--sp-4) 0;
  animation: marquee 40s linear infinite;
  white-space: nowrap;
  font: 500 var(--step--1) var(--font-mono);
  color: var(--ink-mute); letter-spacing: .12em; text-transform: uppercase;
}
.hero-marquee-inner span { display: inline-flex; align-items: center; gap: var(--sp-6); }
.hero-marquee-inner .sep { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .7; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==================================================================
   IMAGE PLACEHOLDERS
   ================================================================== */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--ink) 8%, transparent) 0 1px,
      transparent 1px 10px),
    color-mix(in oklab, var(--bg-elev) 92%, var(--ink));
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  color: var(--ink-mute);
}
.ph::after {
  content: attr(data-label);
  position: absolute; left: 14px; bottom: 12px;
  font: 500 var(--step--2) var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 10px;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  backdrop-filter: blur(6px);
}
.ph::before {
  content: attr(data-index);
  position: absolute; top: 14px; right: 16px;
  font: 500 var(--step--2) var(--font-mono);
  letter-spacing: .18em; color: var(--ink-mute);
}
.ph.tall  { aspect-ratio: 3 / 4; }
.ph.wide  { aspect-ratio: 16 / 9; }
.ph.square{ aspect-ratio: 1; }
.ph.hero-photo { aspect-ratio: 5 / 4; }

/* ==================================================================
   ABOUT / WELCOME
   ================================================================== */
.about {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: var(--sp-8);
  align-items: start;
}
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }

.section-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font: 500 var(--step--2) var(--font-mono);
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: var(--sp-6);
}
.section-eyebrow .num { color: var(--accent); }
.section-eyebrow .line { flex: 1; height: 1px; background: var(--line); }

.section-title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 400;
  text-wrap: balance;
}
.section-title em { font-style: italic; color: var(--accent); }

.about-copy p {
  color: var(--ink-dim);
  font-size: var(--step-1);
  line-height: 1.5;
  margin-top: var(--sp-5);
  text-wrap: pretty;
  max-width: 62ch;
}

.pull-quote {
  margin-top: var(--sp-6);
  padding: var(--sp-6);
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.25;
  font-style: italic;
  color: var(--ink);
}

/* ==================================================================
   STATS BIG (count up)
   ================================================================== */
.stats-big {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-8) 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 900px) { .stats-big { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
.stat-big .n {
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-weight: 400;
  display: flex; align-items: baseline; gap: 6px;
}
.stat-big .n .suffix { font-size: 0.4em; color: var(--accent); font-family: var(--font-mono); font-weight: 500; }
.stat-big .l {
  margin-top: var(--sp-3);
  font: 500 var(--step--2) var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute);
}
.stat-big .d {
  margin-top: 4px;
  font-size: var(--step--1);
  color: var(--ink-dim);
  max-width: 22ch;
}

/* ==================================================================
   CAPABILITY CARDS
   ================================================================== */
.caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 900px) { .caps { grid-template-columns: 1fr; } }

.cap {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--sp-6);
  background: var(--bg-elev);
  min-height: 340px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, background-color .3s ease;
}
.cap:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.cap .num {
  font: 500 var(--step--2) var(--font-mono);
  color: var(--ink-mute);
  letter-spacing: .18em;
}
.cap h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: var(--sp-4);
}
.cap p {
  margin-top: var(--sp-4);
  color: var(--ink-dim);
  font-size: var(--step-0);
  max-width: 40ch;
}
.cap .cap-more {
  margin-top: var(--sp-5);
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 var(--step--1) var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.cap-glyph {
  position: absolute; right: -20px; bottom: -20px;
  width: 180px; height: 180px;
  opacity: .18;
  color: var(--accent);
}
.cap:hover .cap-glyph { opacity: .32; }

/* ==================================================================
   FACILITY / STICKY SPLIT
   ================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split-media { position: sticky; top: 100px; }
.split-list { display: grid; gap: var(--sp-6); }
.split-item {
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line);
}
.split-item:first-child { border-top: 0; }
.split-item h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  display: flex; justify-content: space-between; gap: var(--sp-4);
}
.split-item h4 .idx { font: 500 var(--step--2) var(--font-mono); color: var(--ink-mute); letter-spacing: .14em; }
.split-item p { color: var(--ink-dim); margin-top: var(--sp-3); font-size: var(--step-0); }
.spec-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-4); }
.spec-list li {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font: 500 var(--step--2) var(--font-mono);
  letter-spacing: .1em; color: var(--ink-dim);
}

/* ==================================================================
   QUALITY GRID
   ================================================================== */
.quality {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
@media (max-width: 900px) { .quality { grid-template-columns: repeat(2, 1fr); } }
.qual {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-6);
  min-height: 200px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: background-color .3s;
}
.qual:hover { background: var(--bg-elev); }
.qual .badge {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  color: var(--accent);
}
.qual .name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  letter-spacing: -0.02em;
}
.qual .desc {
  font: 500 var(--step--2) var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute);
  margin-top: 6px;
}

/* ==================================================================
   THERAPEUTIC AREAS
   ================================================================== */
.therapeutic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 900px) { .therapeutic { grid-template-columns: repeat(2, 1fr); } }
.thera {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: var(--sp-5) var(--sp-4);
  aspect-ratio: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: background-color .3s, color .3s;
  cursor: default;
}
.thera:hover { background: var(--accent); color: var(--bg); }
.thera:hover .thera-count { color: var(--bg); }
.thera-name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1;
  letter-spacing: -0.02em;
}
.thera-count {
  font: 500 var(--step--2) var(--font-mono);
  letter-spacing: .14em; color: var(--ink-mute);
}

/* ==================================================================
   CHAIRMAN
   ================================================================== */
.chairman {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-8);
  align-items: center;
}
@media (max-width: 900px) { .chairman { grid-template-columns: 1fr; } }
.chairman-photo { border-radius: var(--r-3); overflow: hidden; }
.chairman blockquote {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--ink);
  text-wrap: pretty;
  position: relative;
  padding-left: var(--sp-5);
}
.chairman blockquote::before {
  content: "";
  position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 2px; background: var(--accent);
}
.chairman blockquote em { color: var(--accent); font-style: italic; }
.chairman-name {
  margin-top: var(--sp-6);
  display: flex; align-items: center; gap: var(--sp-3);
  font: 500 var(--step-0) var(--font-mono);
  letter-spacing: .04em;
}
.chairman-name span { color: var(--ink-mute); }

/* ==================================================================
   GLOBAL MAP
   ================================================================== */
.globe {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--sp-7);
  background: var(--bg-elev);
  overflow: hidden;
}
.globe-grid {
  position: relative;
  height: 460px;
  background-image:
    radial-gradient(1px 1px at 3% 30%, var(--ink-mute), transparent),
    radial-gradient(1px 1px at 12% 20%, var(--ink-mute), transparent),
    radial-gradient(1px 1px at 20% 40%, var(--ink-mute), transparent),
    radial-gradient(1px 1px at 32% 25%, var(--ink-mute), transparent),
    radial-gradient(1px 1px at 40% 55%, var(--ink-mute), transparent),
    radial-gradient(1px 1px at 50% 30%, var(--ink-mute), transparent),
    radial-gradient(1px 1px at 55% 45%, var(--ink-mute), transparent),
    radial-gradient(1px 1px at 62% 60%, var(--ink-mute), transparent),
    radial-gradient(1px 1px at 70% 25%, var(--ink-mute), transparent),
    radial-gradient(1px 1px at 78% 40%, var(--ink-mute), transparent),
    radial-gradient(1px 1px at 85% 30%, var(--ink-mute), transparent),
    radial-gradient(1px 1px at 92% 55%, var(--ink-mute), transparent);
  border: 1px dashed var(--line);
  border-radius: var(--r-2);
}
.globe-pin {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent),
    0 0 0 8px color-mix(in oklab, var(--accent) 10%, transparent);
  transform: translate(-50%, -50%);
}
.globe-pin::after {
  content: attr(data-label);
  position: absolute; left: 18px; top: -4px; white-space: nowrap;
  font: 500 var(--step--2) var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  padding: 3px 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
}
.globe-legend {
  position: absolute; left: var(--sp-7); bottom: var(--sp-7);
  display: flex; gap: var(--sp-5);
  font: 500 var(--step--2) var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute);
}
.globe-legend b { color: var(--ink); font-weight: 500; }

/* ==================================================================
   NEWS
   ================================================================== */
.news {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 900px) { .news { grid-template-columns: 1fr; } }
.news-card {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--bg-elev);
  transition: transform .3s, border-color .3s;
}
.news-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.news-card .meta {
  display: flex; justify-content: space-between;
  font: 500 var(--step--2) var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute);
}
.news-card h4 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  text-wrap: pretty;
}
.news-card p { color: var(--ink-dim); font-size: var(--step-0); }
.news-card .read {
  margin-top: auto;
  font: 500 var(--step--1) var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}

/* ==================================================================
   CAREERS CTA — huge
   ================================================================== */
.careers-cta {
  position: relative;
  padding: var(--sp-9) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.careers-cta h2 {
  font-family: var(--font-display);
  font-size: var(--step-6);
  line-height: 0.88;
  letter-spacing: -0.04em;
  font-weight: 400;
  text-wrap: balance;
  max-width: 12ch;
}
.careers-cta h2 em { color: var(--accent); font-style: italic; }
.careers-cta .row {
  margin-top: var(--sp-6);
  display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: var(--sp-5);
}
.careers-cta p { color: var(--ink-dim); max-width: 44ch; }

/* ==================================================================
   CONTACT
   ================================================================== */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

.contact-details dl { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); }
.contact-details dt {
  font: 500 var(--step--2) var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute);
}
.contact-details dd {
  margin: 4px 0 0 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.form { display: grid; gap: var(--sp-4); }
.field {
  display: grid; gap: 6px;
}
.field label {
  font: 500 var(--step--2) var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute);
}
.field input, .field textarea, .field select {
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  padding: 10px 0;
  font: 500 var(--step-0) var(--font-sans);
  outline: none;
  transition: border-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 700px) { .field-row { grid-template-columns: 1fr; } }

/* ==================================================================
   FOOTER
   ================================================================== */
.footer {
  padding: var(--sp-8) 0 var(--sp-6);
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-6);
}
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
.footer h5 {
  font: 500 var(--step--2) var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: var(--sp-4);
}
.footer ul { display: grid; gap: 6px; }
.footer ul a { color: var(--ink); font-size: var(--step-0); }
.footer ul a:hover { color: var(--accent); }
.footer-bottom {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4);
  font: 500 var(--step--2) var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
}

.wordmark {
  margin-top: var(--sp-6);
  font-family: var(--font-display);
  font-size: clamp(80px, 18vw, 260px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  white-space: nowrap;
  overflow: hidden;
}

/* ==================================================================
   REVEAL
   ================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s ease, transform .9s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 400ms; }

/* ==================================================================
   CURSOR SPOTLIGHT (V4)
   ================================================================== */
.spotlight {
  position: fixed;
  pointer-events: none;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 25%, transparent), transparent 70%);
  transform: translate(-50%, -50%);
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .5s;
}
[data-variation="4"] .spotlight { opacity: 1; }

/* ==================================================================
   PAGE HERO (inner pages)
   ================================================================== */
.page-hero {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 100px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-hero-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--sp-8); align-items: end; }
@media (max-width: 900px) { .page-hero-inner { grid-template-columns: 1fr; } }
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-5);
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin-top: var(--sp-5);
}
.page-hero h1 em { font-style: italic; color: var(--accent); }
.page-hero-lede {
  color: var(--ink-dim);
  font-size: var(--step-1);
  line-height: 1.45;
  max-width: 46ch;
}

/* breadcrumb */
.crumb {
  display: flex; align-items: center; gap: 8px;
  font: 500 var(--step--2) var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute);
}
.crumb .sep { opacity: .5; }
.crumb a:hover { color: var(--ink); }
.crumb .cur { color: var(--accent); }

/* Toc column layout for text-heavy pages */
.text-page {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--sp-8);
}
@media (max-width: 900px) { .text-page { grid-template-columns: 1fr; } }
.text-toc {
  position: sticky; top: 100px;
  align-self: start;
  border-left: 1px solid var(--line);
  padding-left: var(--sp-4);
  display: grid; gap: 8px;
  font: 500 var(--step--2) var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
}
.text-toc a { color: var(--ink-mute); padding: 4px 0; }
.text-toc a:hover, .text-toc a.on { color: var(--accent); }

.prose h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: var(--sp-8);
  scroll-margin-top: 100px;
}
.prose h2:first-child { margin-top: 0; }
.prose h2 em { font-style: italic; color: var(--accent); }
.prose p {
  margin-top: var(--sp-4);
  color: var(--ink-dim);
  font-size: var(--step-1);
  line-height: 1.55;
  max-width: 62ch;
}
.prose ul.checklist { margin-top: var(--sp-5); display: grid; gap: 12px; }
.prose ul.checklist li {
  display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start;
  padding: 12px 0; border-bottom: 1px solid var(--line);
  font-size: var(--step-0);
}
.prose ul.checklist li::before {
  content: "";
  width: 12px; height: 12px; margin-top: 6px;
  border: 1px solid var(--accent);
  background: color-mix(in oklab, var(--accent) 20%, transparent);
  border-radius: 3px;
}
.prose ul.checklist li b { color: var(--ink); font-weight: 500; }
.prose ul.checklist li small { display: block; color: var(--ink-mute); font: 500 var(--step--2) var(--font-mono); letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }

/* API table */
.api-table {
  border-top: 1px solid var(--line);
  margin-top: var(--sp-7);
}
.api-row {
  display: grid;
  grid-template-columns: 60px 2.4fr 1fr 1fr 1fr 100px;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  transition: background-color .25s, padding-left .25s;
}
.api-row.head {
  font: 500 var(--step--2) var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute);
  padding: var(--sp-3) 0;
}
.api-row.data:hover { background: var(--bg-elev); padding-left: var(--sp-3); }
.api-row .idx { font-family: var(--font-mono); color: var(--ink-mute); font-size: var(--step--2); letter-spacing: .1em; }
.api-row .name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.api-row .therap, .api-row .filing, .api-row .status {
  font: 500 var(--step--1) var(--font-mono);
  letter-spacing: .05em; color: var(--ink-dim);
}
.api-row .status .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-full);
  font-size: var(--step--2); letter-spacing: .1em; color: var(--ink-dim);
}
.api-row .status .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.api-row .status .pill.dev::before { background: var(--accent-2); }
.api-row .status .pill.plan::before { background: var(--ink-mute); }
.api-row .cta {
  text-align: right;
  font: 500 var(--step--2) var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
@media (max-width: 900px) {
  .api-row { grid-template-columns: 40px 1fr; gap: 8px; }
  .api-row.head { display: none; }
  .api-row .therap, .api-row .filing, .api-row .status, .api-row .cta {
    grid-column: 2 / 3;
  }
}

/* Careers page */
.roles { border-top: 1px solid var(--line); margin-top: var(--sp-7); }
.role {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 40px;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  transition: padding-left .25s, background-color .25s;
}
.role:hover { background: var(--bg-elev); padding-left: var(--sp-3); }
.role .title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: -0.02em;
}
.role .meta {
  font: 500 var(--step--1) var(--font-mono);
  letter-spacing: .05em; color: var(--ink-dim);
}
.role .arrow { color: var(--accent); font-family: var(--font-mono); }
@media (max-width: 900px) { .role { grid-template-columns: 1fr; } }

/* value cards */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 900px) { .values { grid-template-columns: 1fr; } }
.value {
  padding: var(--sp-6);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-height: 260px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.value:last-child { border-right: 0; }
.value .num { font: 500 var(--step--2) var(--font-mono); color: var(--ink-mute); letter-spacing: .18em; }
.value h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); letter-spacing: -0.02em; line-height: 1.1; margin-top: var(--sp-3); }
.value p { color: var(--ink-dim); margin-top: var(--sp-3); font-size: var(--step-0); }

/* timeline */
.timeline { display: grid; gap: 0; margin-top: var(--sp-7); }
.tl-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--sp-6);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.tl-row:last-child { border-bottom: 1px solid var(--line); }
.tl-year {
  font-family: var(--font-display);
  font-size: var(--step-3);
  letter-spacing: -0.02em;
  line-height: 1;
}
.tl-body h4 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-1); letter-spacing: -0.01em;
}
.tl-body p { color: var(--ink-dim); margin-top: 8px; font-size: var(--step-0); max-width: 60ch; }

/* ==================================================================
   TWEAKS PANEL
   ================================================================== */
.tweaks {
  position: fixed;
  right: 20px; bottom: 20px;
  width: 300px;
  z-index: 90;
  background: color-mix(in oklab, var(--bg) 85%, var(--ink));
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.6);
  display: none;
}
.tweaks.on { display: block; }
.tweaks h4 {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--sp-3);
  display: flex; justify-content: space-between; align-items: center;
}
.tweaks h4 .close { cursor: pointer; padding: 2px 6px; border-radius: var(--r-1); }
.tweaks h4 .close:hover { background: var(--line); }

.tweak-group { margin-top: var(--sp-3); }
.tweak-group label {
  display: block;
  font: 500 var(--step--2) var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.tweak-seg {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.tweak-seg button {
  flex: 1;
  padding: 8px;
  font: 500 var(--step--2) var(--font-mono);
  color: var(--ink-dim);
  background: transparent;
  border-right: 1px solid var(--line);
  transition: background .2s, color .2s;
}
.tweak-seg button:last-child { border-right: 0; }
.tweak-seg button.on {
  background: var(--ink);
  color: var(--bg);
}

.tweak-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.tweak-grid button {
  height: 32px;
  border-radius: var(--r-1);
  border: 1px solid var(--line);
  font: 500 var(--step--2) var(--font-mono);
  color: var(--ink);
  background: var(--bg-elev);
}
.tweak-grid button.on {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}