/* ==========================================================================
   Seqora — brand stylesheet
   Derived from "SEQORA brand identity 150526" (v2)
   Colours : Violet Blue #737AEF · Off-white #F4F3F2 · Graphite Black #161616
   Type    : Georgia (display) · Helvetica Neue (body) · Menlo (sequences)
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */
:root {
  /* core brand */
  --black:        #161616;
  --off-white:    #F4F3F2;
  --violet:       #737AEF;
  --violet-dark:  #5A61D6;
  --violet-text:  #5A61D6;   /* violet dark enough for small text on light grounds */
  --violet-lift:  #9BA1F5;   /* violet light enough for focus rings on dark grounds */
  --white:        #FFFFFF;

  /* composite colours of the Seqora gradient */
  --brick:        #812911;
  --burnt-rose:   #DD8573;
  --plum:         #77374E;
  --purple:       #DB867E;
  --dark-green:   #2E3220;
  --lime:         #DADD72;

  /* extended palette — data in product */
  --mint:         #86E0B1;
  --slate:        #4A6D80;
  --sky:          #80ABD6;
  --moss:         #919149;
  --green:        #52A76B;

  /* neutrals derived from graphite + off-white */
  --ink:          #161616;
  /* the three steps below are tuned for contrast on --off-white, not for round
     alpha values: 6.4:1, 6.0:1 and 4.6:1, so all three clear WCAG AA at any
     text size. Do not lighten them without re-checking. */
  --ink-body:     rgba(22, 22, 22, .70);
  --ink-muted:    rgba(22, 22, 22, .68);
  --ink-faint:    rgba(22, 22, 22, .60);
  --rule:         rgba(22, 22, 22, .12);
  --rule-soft:    rgba(22, 22, 22, .07);

  --paper-body:   rgba(244, 243, 242, .72);
  --paper-muted:  rgba(244, 243, 242, .52);   /* 5.2:1 on graphite */
  --rule-dark:    rgba(244, 243, 242, .16);

  /* type */
  --font-display: Georgia, "Times New Roman", Times, serif;
  --font-body:    "Helvetica Neue", Helvetica, Inter, "Segoe UI", Arial, sans-serif;
  --font-mono:    Menlo, "SF Mono", ui-monospace, Consolas, monospace;

  /* metrics */
  --page:         1240px;
  --page-narrow:  760px;
  --gutter:       clamp(20px, 5vw, 56px);
  --header-h:     86px;
  --radius:       18px;
  --radius-lg:    26px;
  --pill:         999px;

  /* motion */
  --ease:         cubic-bezier(.22, .61, .36, 1);
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--off-white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* --- type scale ----------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.015em;
  font-size: clamp(3rem, 8.5vw, 6.4rem);
}
.h1 {
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: -.012em;
  font-size: clamp(2.4rem, 5.6vw, 4.1rem);
}
.h2 {
  font-family: var(--font-display);
  line-height: 1.12;
  letter-spacing: -.01em;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
}
.h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: -.005em;
  line-height: 1.35;
}
.eyebrow {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.eyebrow--light { color: var(--paper-body); }
.lede  { font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.55; color: var(--ink-body); }
.body  { color: var(--ink-body); }
.mono  { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .02em; }

/* --- layout --------------------------------------------------------------- */
.wrap        { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow{ max-width: var(--page-narrow); }
.section     { padding-block: clamp(72px, 10vw, 132px); }
.section--tight { padding-block: clamp(52px, 7vw, 88px); }
.section--dark, .advisors { background: var(--black); color: var(--off-white); }
.section--dark .body,   .advisors .body    { color: var(--paper-body); }
.section--dark .eyebrow,.advisors .eyebrow { color: var(--paper-muted); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* --- keyboard focus ------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--violet-text);
  outline-offset: 3px;
  border-radius: 4px;
}
/* on dark grounds the ring needs to be lighter, not darker */
.header :focus-visible, .footer :focus-visible, .flow :focus-visible,
.section--dark :focus-visible, .advisors :focus-visible, .closing :focus-visible,
.page-head--hero :focus-visible { outline-color: var(--violet-lift); }

/* --- skip link ------------------------------------------------------------ */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  transform: translateY(-160%);
  background: var(--black); color: var(--off-white);
  padding: 12px 20px; border-radius: var(--pill);
  font-size: .9rem; font-weight: 500;
  transition: transform .18s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* --- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: 14px 30px;
  border-radius: var(--pill);
  border: 1px solid transparent;
  font-size: .95rem; font-weight: 500; letter-spacing: .005em;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover      { transform: translateY(-1px); }
.btn--primary   { background: var(--violet); color: var(--ink); }
.btn--primary:hover { background: var(--violet-dark); }
.btn--light     { background: var(--off-white); color: var(--ink); }
.btn--light:hover { background: var(--white); }
.btn--ghost     { border-color: var(--rule); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--ghost-light { border-color: rgba(255,255,255,.42); color: var(--white); }
.btn--ghost-light:hover { border-color: var(--off-white); }
.btn__arrow { transition: transform .25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* --- header --------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--black);
  color: var(--off-white);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: var(--header-h);
}
.header__logo img { height: 38px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); }
.nav__link {
  font-size: .95rem; color: var(--paper-body);
  padding-block: 6px;
  transition: color .2s var(--ease);
}
.nav__link:hover           { color: var(--off-white); }
.nav__link[aria-current]   { color: var(--off-white); }
.nav__cta {
  padding: 9px 20px; border-radius: var(--pill);
  background: var(--violet); color: var(--ink);
  font-size: .9rem; font-weight: 500;
  transition: background .25s var(--ease);
}
.nav__cta:hover { background: var(--violet-dark); }

.nav__toggle {
  display: none;
  background: none; border: 1px solid var(--rule-dark); color: var(--off-white);
  border-radius: var(--pill); padding: 7px 16px; font-size: .85rem; cursor: pointer;
}

/* --- banner (bead string, per brand deck) --------------------------------- */
.banner {
  --bead: max(158px, 19.5vw);
  position: relative;
  background: var(--off-white);
  overflow: hidden;
  text-align: center;
}
.banner__beads {
  margin-top: calc(var(--bead) * -.40);   /* the string bleeds off the top edge */
  pointer-events: none;
  user-select: none;
}
.banner__beads-track {
  display: flex;
  width: max-content;
  animation: bead-drift 46s linear infinite;
}
.banner__beads-set { display: flex; }
.banner__beads-set img {
  flex: 0 0 auto;
  width: var(--bead);
  height: var(--bead);
  /* every bead carries the overlap, so the two sets are identical in width
     and the loop seam is invisible */
  margin-right: calc(var(--bead) * -.05);
  border-radius: 50%;
  object-fit: cover;
}
/* the track holds two identical sets, so -50% lands exactly on the seam */
@keyframes bead-drift {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.banner__inner {
  position: relative; z-index: 1;
  padding-block: clamp(46px, 6vw, 84px) clamp(76px, 10vw, 130px);
}
.banner__title { margin-top: 0; }
.banner__tagline {
  margin-top: 20px;
  font-size: .875rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted);
}
.banner__lede {
  margin: 22px auto 0;
  max-width: 52ch;
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  line-height: 1.55;
  color: var(--ink-body);
}
.banner__actions {
  margin-top: 38px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}

/* --- spectrum to sequence band -------------------------------------------- */
.flow {
  background: var(--black);
  padding-block: clamp(52px, 6.5vw, 88px);
}
/* wider than the page grid — this panel is meant to read as full-bleed */
.flow__inner {
  max-width: 1760px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.flow__scroll { overflow-x: auto; }

/* --- capability cards ----------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.card {
  background: var(--white);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: 30px 28px 32px;
  display: flex; flex-direction: column;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { transform: translateY(-3px); border-color: var(--rule); box-shadow: 0 14px 34px rgba(22,22,22,.07); }
.card__bead {
  width: 54px; height: 54px; border-radius: 50%;
  object-fit: cover; margin-bottom: 22px;
}
.card__title { margin-bottom: 10px; }
.card__text  { font-size: .95rem; color: var(--ink-body); }
.card__meta  { margin-top: 20px; color: var(--ink-faint); }

/* --- platform claims ------------------------------------------------------ */
.claims {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; background: var(--rule-dark);
  margin: 0;
}
.claim { background: var(--black); padding: 32px 22px 30px; }
.claim dt {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 1.1;
  color: var(--white);
}
.claim dd {
  margin: 14px 0 0;
  font-size: .875rem; line-height: 1.5;
  color: var(--paper-body);
}
.note {
  font-size: .8125rem; line-height: 1.6; color: rgba(244, 243, 242, .60);
  max-width: 82ch; margin-top: 26px;
}

/* --- workflow steps ------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 26px); }
.step { position: relative; padding-top: 26px; border-top: 1px solid var(--rule); }
.step__i {
  font-family: var(--font-mono); font-size: .75rem; color: var(--violet-text);
  letter-spacing: .1em; margin-bottom: 12px;
}
.step__title { margin-bottom: 8px; }
.step__text  { font-size: .9rem; color: var(--ink-body); }

/* --- mode tags ------------------------------------------------------------ */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.mode  { background: var(--off-white); padding: 26px 24px 28px; }
.mode__dot { width: 11px; height: 11px; border-radius: 50%; margin-bottom: 16px; }
.mode__title { margin-bottom: 6px; }
.mode__text { font-size: .875rem; color: var(--ink-muted); }

/* --- closing band --------------------------------------------------------- */
.closing {
  position: relative; overflow: hidden;
  background: var(--black) url("../img/gradient-band.jpg") center / cover no-repeat;
  color: var(--white);
  text-align: center;
}
.closing::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .26; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
}
.closing::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(22,22,22,.46) 0%, rgba(22,22,22,.12) 62%, transparent 100%);
}
.closing__inner { position: relative; z-index: 1; padding-block: clamp(88px, 12vw, 156px); }
.closing__title { color: var(--white); }
.closing__lede  { margin: 22px auto 0; max-width: 46ch; color: rgba(255,255,255,.86); }
.closing__actions { margin-top: 36px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

/* --- bead chain accent ---------------------------------------------------- */
.chain { display: flex; align-items: center; gap: 10px; }
.chain img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

/* --- footer --------------------------------------------------------------- */
.footer { background: var(--black); color: var(--paper-body); padding-block: 60px 42px; }
.footer__top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 40px; border-bottom: 1px solid var(--rule-dark);
}
.footer__logo img { height: 38px; width: auto; margin-bottom: 22px; }
.footer__tag { font-family: var(--font-display); font-size: 1.3rem; color: var(--off-white); max-width: 20ch; line-height: 1.25; }
.footer__col .footer__h {
  font-family: var(--font-body); font-weight: 500;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper-muted); margin: 0 0 16px;
}
.footer__col li { margin-bottom: 10px; }
.footer__col a { font-size: .95rem; transition: color .2s var(--ease); }
.footer__col a:hover { color: var(--off-white); }
.footer__bottom {
  padding-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 28px;
  justify-content: space-between; font-size: .8125rem; color: var(--paper-muted);
}

/* --- page header (sub-pages) --------------------------------------------- */
.page-head__inner { padding-block: clamp(56px, 8vw, 96px) clamp(34px, 4vw, 52px); }
.page-head__title { margin-top: 16px; }
.page-head__lede  { margin-top: 22px; max-width: 56ch; }

/* the hero variant carries the Seqora gradient behind the copy */
.page-head--hero {
  position: relative;
  overflow: hidden;
  background: var(--black) url("../img/gradient-band.jpg") center / cover no-repeat;
}
/* a scrim weighted to the left, where the copy sits, so the right side of the
   gradient stays open */
.page-head--hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(22,22,22,.66) 0%, rgba(22,22,22,.40) 52%, rgba(22,22,22,.14) 100%);
}
.page-head--hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .26; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
}
.page-head--hero .page-head__inner {
  position: relative; z-index: 1;
  padding-block: clamp(78px, 10vw, 132px);
}
.page-head--hero .eyebrow          { color: rgba(255, 255, 255, .62); }
.page-head--hero .page-head__title { color: var(--white); }
.page-head--hero .page-head__lede  { color: rgba(255, 255, 255, .88); max-width: 52ch; }

/* --- ABOUT ---------------------------------------------------------------- */
.statement {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.1vw, 2.5rem);
  line-height: 1.22; letter-spacing: -.01em;
  max-width: 20ch;
}
.about-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); }
.about-block { padding-block: clamp(34px, 4.5vw, 54px); border-top: 1px solid var(--rule); }
.about-block:last-child { border-bottom: 1px solid var(--rule); }
.about-block__body p + p { margin-top: 18px; }
.about-block__body { max-width: 62ch; }
.pull {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.3;
  padding-left: 22px; border-left: 2px solid var(--violet);
  margin-top: 26px;
}

/* prose relief: a scannable set, and a bead rule between long blocks */
.tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 22px;
}
.tags li {
  border: 1px solid var(--rule);
  border-radius: var(--pill);
  padding: 7px 16px;
  font-size: .85rem; color: var(--ink-body);
}
.chain--divider {
  justify-content: center;
  gap: 8px;
  padding-block: clamp(30px, 4vw, 46px);
}
.chain--divider img { width: 22px; height: 22px; }

/* --- TEAM ----------------------------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 26px); }
.member {
  background: var(--white);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: 28px 26px 30px;
  display: flex; flex-direction: column;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.member:hover { transform: translateY(-3px); border-color: var(--rule); box-shadow: 0 14px 34px rgba(22,22,22,.07); }
/* portrait crop at 4:5 — the new headshots are 296px wide, so this is exactly
   2x and stays sharp on retina */
.member__photo {
  width: 148px; height: 185px; border-radius: 16px;
  object-fit: cover; margin-bottom: 22px;
  background: var(--rule-soft);
}
.member__name { font-family: var(--font-display); font-size: 1.32rem; line-height: 1.2; }
.member__role {
  margin-top: 7px; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--violet-text);
}
.member__bio { margin-top: 15px; font-size: .92rem; color: var(--ink-body); }

.advisors { background: var(--black); color: var(--off-white); }
.advisors .member {
  background: rgba(244,243,242,.045);
  border-color: var(--rule-dark);
}
.advisors .member:hover { border-color: rgba(244,243,242,.32); box-shadow: none; }
.advisors .member__bio { color: var(--paper-body); }
.advisors .member__role { color: var(--violet); }
.advisors .member__name { color: var(--off-white); }
.advisors-intro .eyebrow { font-size: .875rem; }
.advisors-intro {
  text-align: center;
  max-width: 54ch;
  margin: 0 auto clamp(36px, 4.5vw, 54px);
}
.advisors-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.2vw, 26px);
  max-width: 860px; margin-inline: auto;
}

/* --- RESEARCH ------------------------------------------------------------- */
.pubs { display: grid; gap: clamp(14px, 1.8vw, 20px); }
.pub {
  display: grid; grid-template-columns: 208px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 44px);
  background: var(--white);
  border: 1px solid var(--rule-soft);
  border-left: 2px solid var(--violet);
  border-radius: var(--radius);
  padding: 30px clamp(24px, 3vw, 36px);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-left-color .3s var(--ease);
}
.pub:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(22,22,22,.07); }
.pub__venue {
  font-size: 1.0625rem; line-height: 1.25; letter-spacing: -.005em;
  color: var(--ink); font-weight: 500;
}
.pub__year  { display: block; margin-top: 9px; font-family: var(--font-mono); font-size: .8rem; color: var(--ink-faint); }
.pub__title { font-family: var(--font-display); font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.25; }
.pub__abstract{ margin-top: 16px; font-size: .95rem; color: var(--ink-body); max-width: 68ch; }
.pub__link {
  display: inline-flex; align-items: center; gap: .45em;
  margin-top: 18px; font-size: .875rem; color: var(--violet-text); font-weight: 500;
}
.pub__link:hover { color: var(--violet); }
.pub__link span { transition: transform .25s var(--ease); }
.pub__link:hover span { transform: translateX(3px); }
.pub--preprint { border-left-color: var(--burnt-rose); }

/* --- CONTACT -------------------------------------------------------------- */
.contact-main { text-align: center; max-width: 60ch; margin-inline: auto; }
.contact-email {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 5.2vw, 3.1rem);
  line-height: 1.1; letter-spacing: -.015em;
  border-bottom: 2px solid var(--rule);
  padding-bottom: 4px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.contact-email:hover { color: var(--violet-text); border-color: var(--violet-text); }

.contact-meta {
  display: grid; gap: clamp(24px, 3vw, 34px);
  margin: clamp(44px, 6vw, 66px) 0 0;
  padding-top: clamp(30px, 4vw, 42px);
  border-top: 1px solid var(--rule);
  text-align: left;
}
.contact-meta dt {
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.contact-meta dd { margin: 10px 0 0; color: var(--ink-body); font-size: .975rem; }
.contact-meta a { border-bottom: 1px solid var(--rule); }
.contact-meta a:hover { color: var(--violet-text); border-color: var(--violet-text); }

@media (min-width: 641px) { .contact-meta { grid-template-columns: 1fr 1.6fr; } }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1000px) {
  .cards, .steps { grid-template-columns: repeat(2, 1fr); }
  .claims        { grid-template-columns: repeat(2, 1fr); }
  .modes         { grid-template-columns: repeat(2, 1fr); }
  .team-grid     { grid-template-columns: repeat(2, 1fr); }
  .about-grid    { grid-template-columns: 1fr; gap: 18px; }
  .pub           { grid-template-columns: 1fr; gap: 14px; }
  .footer__top   { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav__toggle { display: inline-block; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: var(--header-h);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--black); padding: 8px var(--gutter) 22px;
    border-top: 1px solid var(--rule-dark);
  }
  .nav.is-open { display: flex; }
  .nav__link { padding-block: 13px; border-bottom: 1px solid var(--rule-dark); }
  .nav__cta  { margin-top: 16px; text-align: center; }
  .cards, .steps, .claims, .modes, .team-grid, .advisors-grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 30px; }
  .banner { --bead: max(132px, 34vw); }
}

/* the doubled logo fits a 375px phone with room to spare, but not the
   narrowest handsets — step it down there rather than let the bar overflow */
@media (max-width: 370px) {
  :root { --header-h: 74px; }
  .header__logo img { height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* --- decode panels (generated — see the build note in README) ------------
   Two readings of real fragment masses on a dark ground. Panel 1 is the
   landing band: PEPTIDE, sequence only, one confidence figure. Panel 2 is the
   full reading: ATAVMPDGQFK phosphorylated on Thr2, b/y ions on the sequence
   and in the spectrum, with the score panel underneath. Markup, keyframes and
   metric strips are generated together — regenerate all three, never one. */
.decode { width: 100%; height: auto; overflow: hidden; }
.decode .peak     { stroke: rgba(244,243,242,.20); stroke-width: 2.2; stroke-linecap: round; }
.decode .peak--base { stroke: rgba(244,243,242,.40); stroke-width: 2.4; }
.decode .peak--read { stroke: var(--off-white); stroke-width: 2.4; }
.decode .axis     { stroke: rgba(244,243,242,.16); stroke-width: 1; }
.decode .stem     { stroke: rgba(244,243,242,.32); stroke-width: 1; }
.decode .ax       { font: 400 12px Menlo, ui-monospace, monospace; fill: rgba(244,243,242,.38); }
.decode .cap      { font: 400 16px Menlo, ui-monospace, monospace; fill: rgba(244,243,242,.62); letter-spacing: .02em; }
.decode .bead     { fill: var(--off-white); }
.decode .aa       { font: 500 17px Menlo, ui-monospace, monospace; fill: var(--ink); }
.decode--full .aa { font-size: 20px; }
.decode .ptm      { fill: var(--violet); }
.decode .ptm-t    { font: 500 11px Menlo, ui-monospace, monospace; fill: #fff; }
.decode .tick     { stroke-width: 1.6; }
.decode .tick-lab { font: 400 11px Menlo, ui-monospace, monospace; }
.decode .ion-peak { stroke-width: 2.4; stroke-linecap: round; }
.decode .ion-lab  { font: 400 11px Menlo, ui-monospace, monospace; }
.decode .ion--b .ion-peak, .decode .ion--b .tick     { stroke: #8B91F2; }
.decode .ion--b .ion-lab,  .decode .ion--b .tick-lab { fill: #8B91F2; }
.decode .ion--y .ion-peak, .decode .ion--y .tick     { stroke: #E39A86; }
.decode .ion--y .ion-lab,  .decode .ion--y .tick-lab { fill: #E39A86; }
.decode .scan__line  { stroke: var(--violet); stroke-width: 1.6; }
.decode .scan__trail { fill: url(#scan-trail); }
.decode .scan__trail--2 { fill: url(#scan-trail-2); }

.decode-scroll { overflow-x: auto; }

/* readouts ---------------------------------------------------------------- */
.metric dt {
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(244,243,242,.45);
}
.metric dd {
  margin: 10px 0 0; font-family: var(--font-display);
  font-size: 1.5rem; line-height: 1; color: var(--off-white);
}
.metric {
  background: var(--black);
  border: 1px solid rgba(244,243,242,.14);
  padding: 18px 18px 20px;
  opacity: 0;
}
.brief-readout {
  margin: 34px auto 0;
  display: grid; width: max-content; min-width: 260px;
  text-align: center;
}
/* the landing band carries a single figure, so let it be the thing you look at */
.brief-readout .metric {
  padding: 26px 46px 30px;
  border-color: rgba(115, 122, 239, .55);
  border-radius: var(--radius);
}
.brief-readout .metric dt { font-size: .78rem; letter-spacing: .15em; color: var(--paper-body); }
.brief-readout .metric dd {
  margin-top: 14px;
  font-size: clamp(2.7rem, 4.6vw, 3.6rem);
}
.decode-metrics {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 8px; margin: 30px 0 0;
}
@media (max-width: 1100px) { .decode-metrics { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .decode-metrics { grid-template-columns: repeat(2, 1fr); } }

.decode--brief { min-width: 660px; }
.decode--brief .node { opacity: 0; }
.decode--brief .scan { animation: brief-scan 9.0s linear infinite; }
@keyframes brief-scan {
  0%   { transform: translateX(0); opacity: 0; }
  2%   { opacity: 1; }
  50.0%   { transform: translateX(-1200px); opacity: 1; }
  52.0% { transform: translateX(-1200px); opacity: 0; }
  100% { transform: translateX(-1200px); opacity: 0; }
}

.decode--brief .n0 { animation: brief-n0 9.0s ease-out infinite; }
@keyframes brief-n0 {
  0%, 45.08%                        { opacity: 0; transform: translateY(9px); }
  48.86%, 80.0% { opacity: 1; transform: translateY(0); }
  87.78%, 100%                 { opacity: 0; transform: translateY(9px); }
}

.decode--brief .n1 { animation: brief-n1 9.0s ease-out infinite; }
@keyframes brief-n1 {
  0%, 39.08%                        { opacity: 0; transform: translateY(9px); }
  42.86%, 80.0% { opacity: 1; transform: translateY(0); }
  87.78%, 100%                 { opacity: 0; transform: translateY(9px); }
}

.decode--brief .n2 { animation: brief-n2 9.0s ease-out infinite; }
@keyframes brief-n2 {
  0%, 33.29%                        { opacity: 0; transform: translateY(9px); }
  37.07%, 80.0% { opacity: 1; transform: translateY(0); }
  87.78%, 100%                 { opacity: 0; transform: translateY(9px); }
}

.decode--brief .n3 { animation: brief-n3 9.0s ease-out infinite; }
@keyframes brief-n3 {
  0%, 26.42%                        { opacity: 0; transform: translateY(9px); }
  30.19%, 80.0% { opacity: 1; transform: translateY(0); }
  87.78%, 100%                 { opacity: 0; transform: translateY(9px); }
}

.decode--brief .n4 { animation: brief-n4 9.0s ease-out infinite; }
@keyframes brief-n4 {
  0%, 20.54%                        { opacity: 0; transform: translateY(9px); }
  24.32%, 80.0% { opacity: 1; transform: translateY(0); }
  87.78%, 100%                 { opacity: 0; transform: translateY(9px); }
}

.decode--brief .n5 { animation: brief-n5 9.0s ease-out infinite; }
@keyframes brief-n5 {
  0%, 13.79%                        { opacity: 0; transform: translateY(9px); }
  17.57%, 80.0% { opacity: 1; transform: translateY(0); }
  87.78%, 100%                 { opacity: 0; transform: translateY(9px); }
}

.decode--brief .n6 { animation: brief-n6 9.0s ease-out infinite; }
@keyframes brief-n6 {
  0%, 6.75%                        { opacity: 0; transform: translateY(9px); }
  10.53%, 80.0% { opacity: 1; transform: translateY(0); }
  87.78%, 100%                 { opacity: 0; transform: translateY(9px); }
}

.brief-readout .metric { animation: brief-conf 9.0s ease-out infinite; }
@keyframes brief-conf {
  0%, 53.33%                        { opacity: 0; transform: translateY(8px); }
  57.11%, 80.0% { opacity: 1; transform: translateY(0); }
  87.78%, 100%                 { opacity: 0; transform: translateY(8px); }
}

.decode--full { min-width: 940px; }
.decode--full .node, .decode--full .ion { opacity: 0; }
/* panel 2 shows a known sequence being annotated, so the ladder arrives whole
   and the b/y marks land on it as each ion is met in the spectrum */
.decode--full .node { animation: full-seq 13.5s ease-out infinite; }
@keyframes full-seq {
  0%, 1.11%       { opacity: 0; transform: translateY(10px); }
  3.33%, 81.48%   { opacity: 1; transform: translateY(0); }
  88.89%, 100%    { opacity: 0; transform: translateY(10px); }
}
.decode--full .scan { animation: full-scan 13.5s linear infinite; }
@keyframes full-scan {
  0%              { transform: translateX(0); opacity: 0; }
  1.4%            { opacity: 1; }
  44.44%     { transform: translateX(1440px); opacity: 1; }
  45.839999999999996% { transform: translateX(1440px); opacity: 0; }
  100%            { transform: translateX(1440px); opacity: 0; }
}

  15.8%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(10px); }
}

  17.53%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(10px); }
}

  19.26%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(10px); }
}

  20.99%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(10px); }
}

  22.72%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(10px); }
}

  24.44%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(10px); }
}

  26.17%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(10px); }
}

  27.9%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(10px); }
}

  29.63%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(10px); }
}

  31.36%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(10px); }
}

  33.09%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(10px); }
}

.decode--full .i0 { animation: full-i0 13.5s ease-out infinite; }
@keyframes full-i0 {
  0%, 4.37%             { opacity: 0; transform: translateY(8px); }
  6.59%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(8px); }
}

.decode--full .i1 { animation: full-i1 13.5s ease-out infinite; }
@keyframes full-i1 {
  0%, 7.95%             { opacity: 0; transform: translateY(8px); }
  10.18%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(8px); }
}

.decode--full .i2 { animation: full-i2 13.5s ease-out infinite; }
@keyframes full-i2 {
  0%, 9.34%             { opacity: 0; transform: translateY(8px); }
  11.57%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(8px); }
}

.decode--full .i3 { animation: full-i3 13.5s ease-out infinite; }
@keyframes full-i3 {
  0%, 10.36%             { opacity: 0; transform: translateY(8px); }
  12.58%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(8px); }
}

.decode--full .i4 { animation: full-i4 13.5s ease-out infinite; }
@keyframes full-i4 {
  0%, 13.67%             { opacity: 0; transform: translateY(8px); }
  15.9%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(8px); }
}

.decode--full .i5 { animation: full-i5 13.5s ease-out infinite; }
@keyframes full-i5 {
  0%, 15.6%             { opacity: 0; transform: translateY(8px); }
  17.83%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(8px); }
}

.decode--full .i6 { animation: full-i6 13.5s ease-out infinite; }
@keyframes full-i6 {
  0%, 18.14%             { opacity: 0; transform: translateY(8px); }
  20.36%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(8px); }
}

.decode--full .i7 { animation: full-i7 13.5s ease-out infinite; }
@keyframes full-i7 {
  0%, 19.49%             { opacity: 0; transform: translateY(8px); }
  21.72%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(8px); }
}

.decode--full .i8 { animation: full-i8 13.5s ease-out infinite; }
@keyframes full-i8 {
  0%, 21.42%             { opacity: 0; transform: translateY(8px); }
  23.64%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(8px); }
}

.decode--full .i9 { animation: full-i9 13.5s ease-out infinite; }
@keyframes full-i9 {
  0%, 22.77%             { opacity: 0; transform: translateY(8px); }
  25.0%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(8px); }
}

.decode--full .i10 { animation: full-i10 13.5s ease-out infinite; }
@keyframes full-i10 {
  0%, 25.31%             { opacity: 0; transform: translateY(8px); }
  27.53%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(8px); }
}

.decode--full .i11 { animation: full-i11 13.5s ease-out infinite; }
@keyframes full-i11 {
  0%, 27.21%             { opacity: 0; transform: translateY(8px); }
  29.43%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(8px); }
}

.decode--full .i12 { animation: full-i12 13.5s ease-out infinite; }
@keyframes full-i12 {
  0%, 30.56%             { opacity: 0; transform: translateY(8px); }
  32.78%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(8px); }
}

.decode--full .i13 { animation: full-i13 13.5s ease-out infinite; }
@keyframes full-i13 {
  0%, 31.57%             { opacity: 0; transform: translateY(8px); }
  33.79%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(8px); }
}

.decode--full .i14 { animation: full-i14 13.5s ease-out infinite; }
@keyframes full-i14 {
  0%, 32.96%             { opacity: 0; transform: translateY(8px); }
  35.18%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(8px); }
}

.decode--full .i15 { animation: full-i15 13.5s ease-out infinite; }
@keyframes full-i15 {
  0%, 39.08%             { opacity: 0; transform: translateY(8px); }
  41.3%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(8px); }
}

.decode-metrics .metric:nth-child(1) { animation: full-m0 13.5s ease-out infinite; }
@keyframes full-m0 {
  0%, 46.67%             { opacity: 0; transform: translateY(8px); }
  48.89%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(8px); }
}

.decode-metrics .metric:nth-child(2) { animation: full-m1 13.5s ease-out infinite; }
@keyframes full-m1 {
  0%, 48.52%             { opacity: 0; transform: translateY(8px); }
  50.74%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(8px); }
}

.decode-metrics .metric:nth-child(3) { animation: full-m2 13.5s ease-out infinite; }
@keyframes full-m2 {
  0%, 50.37%             { opacity: 0; transform: translateY(8px); }
  52.59%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(8px); }
}

.decode-metrics .metric:nth-child(4) { animation: full-m3 13.5s ease-out infinite; }
@keyframes full-m3 {
  0%, 52.22%             { opacity: 0; transform: translateY(8px); }
  54.44%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(8px); }
}

.decode-metrics .metric:nth-child(5) { animation: full-m4 13.5s ease-out infinite; }
@keyframes full-m4 {
  0%, 54.07%             { opacity: 0; transform: translateY(8px); }
  56.3%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(8px); }
}

.decode-metrics .metric:nth-child(6) { animation: full-m5 13.5s ease-out infinite; }
@keyframes full-m5 {
  0%, 55.93%             { opacity: 0; transform: translateY(8px); }
  58.15%, 81.48% { opacity: 1; transform: translateY(0); }
  88.89%, 100%        { opacity: 0; transform: translateY(8px); }
}

/* the read head and the reveal are decorative — hold the finished reading
   for anyone who has asked the system for less motion */
@media (prefers-reduced-motion: reduce) {
  .decode .node, .decode .ion, .metric {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .decode .scan { display: none !important; }
}

/* --- legal pages ---------------------------------------------------------- */
.legal__stamp {
  margin-top: 20px;
  font-family: var(--font-mono); font-size: .8125rem; color: var(--ink-faint);
}
.legal { max-width: 74ch; }
.legal h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.1vw, 1.65rem); line-height: 1.25;
  margin-top: 2.4em; padding-top: 1.5em;
  border-top: 1px solid var(--rule);
}
.legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 {
  font-family: var(--font-body); font-weight: 500;
  font-size: 1.0625rem; letter-spacing: -.005em;
  margin-top: 2em;
}
.legal p {
  margin-top: 1em;
  color: var(--ink-body);
  font-size: .975rem; line-height: 1.65;
}
.legal a { border-bottom: 1px solid var(--rule); transition: color .2s var(--ease), border-color .2s var(--ease); }
.legal a:hover { color: var(--violet-text); border-color: var(--violet-text); }

/* unused while the site sets no cookies — kept for the cookie table that comes
   back if analytics is ever added */
.legal__table { overflow-x: auto; margin-top: 22px; }
.legal table { width: 100%; border-collapse: collapse; min-width: 420px; }
.legal th, .legal td {
  text-align: left; padding: 12px 16px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: .9rem;
}
.legal th {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 500;
  border-bottom: 1px solid var(--rule);
}
.legal td { color: var(--ink-body); }
.legal td.mono { color: var(--ink); font-size: .8125rem; }
.legal tr:last-child td { border-bottom: 0; }

/* --- decode panels on small screens ---------------------------------------
   The panels used to hold a min-width and scroll sideways. They now scale to
   fit. Because the whole graphic shrinks uniformly, the marks inside are
   enlarged in user units to survive it. */
@media (max-width: 900px) {
  .decode--brief, .decode--full { min-width: 0; }
  .flow__scroll, .decode-scroll { overflow-x: visible; }

  /* Panel 2 carries 16 ion annotations across 1440 units. Once the graphic is
     under ~900px they fall below about 6px and read as noise, so they are
     dropped rather than shrunk. The spectrum, the sequence and the sweep still
     carry the idea, and the six scores underneath are HTML at full size. */
  .decode--full .ion-lab,
  .decode--full .tick,
  .decode--full .tick-lab,
  .decode--full .ax,
  .decode--full .cap        { display: none; }
  .decode--full .bead       { r: 26; }
  .decode--full .aa         { font-size: 26px; }
  .decode--full .ptm        { r: 12; }
  .decode--full .peak       { stroke-width: 4; }
  .decode--full .ion-peak   { stroke-width: 5.5; }
  .decode--full .axis       { stroke-width: 2.5; }
  .decode--full .scan__line { stroke-width: 4.5; }
}

@media (max-width: 620px) {
  /* panel 1 is sparse, so it only needs scaling up to stay fully readable */
  .decode--brief .bead       { r: 34; }
  .decode--brief .aa         { font-size: 34px; }
  .decode--brief .peak       { stroke-width: 5; }
  .decode--brief .peak--base,
  .decode--brief .peak--read { stroke-width: 6; }
  .decode--brief .stem       { stroke-width: 2.5; }
  .decode--brief .axis       { stroke-width: 2.5; }
  .decode--brief .scan__line { stroke-width: 4.5; }
}

/* --- scroll reveal --------------------------------------------------------
   Content settles in as it enters the viewport: a fade with a 10px rise, and
   a short stagger across anything that arrives together. The hidden state is
   scoped to .js-reveal, which is set by an inline script in <head> — without
   JavaScript, or with reduced motion, nothing is ever hidden.
   The selector list below is the single place that decides what animates. */
.js-reveal .page-head__inner,
.js-reveal .decode-stage,
.js-reveal .about-grid,
.js-reveal .card,
.js-reveal .claim,
.js-reveal .step,
.js-reveal .mode,
.js-reveal .member,
.js-reveal .pub,
.js-reveal .section-intro,
.js-reveal .closing__inner,
.js-reveal .contact-main,
.js-reveal .hiring {
  opacity: 0;
  transform: translateY(10px);
}
/* the class is doubled on purpose: it lifts the specificity above anything in
   the list above, so adding a selector there can never leave content stuck
   hidden. An element selector (`.some-grid > div`) outranks a single class and
   once left a whole page invisible. */
.js-reveal .is-visible.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

/* each panel waits its turn, so the sweep is seen from the start rather than
   joined halfway through */
.js-reveal .decode-stage .node,
.js-reveal .decode-stage .ion,
.js-reveal .decode-stage .scan,
.js-reveal .decode-stage .metric { animation-play-state: paused; }
.js-reveal .decode-stage.is-visible .node,
.js-reveal .decode-stage.is-visible .ion,
.js-reveal .decode-stage.is-visible .scan,
.js-reveal .decode-stage.is-visible .metric { animation-play-state: running; }