:root{ --void:#ffffff; --deep:#F8F9FB; }

  /* ---- 1. Bigger, more confident type scale (Apple: big display type, tight leading) ---- */
  header.top h1{
    font-size:clamp(2.3rem,4.4vw,3.75rem);
    line-height:1.03;
    letter-spacing:-.025em;
  }
  header.top p.lead{
    font-size:1.25rem;
    line-height:1.6;
    max-width:44ch;
  }
  .eyebrow{ font-size:.76rem; letter-spacing:.22em; }

  /* This page has no dark hero image behind the nav (unlike the homepage), so it needs a
     solid dark nav at all times, not just on scroll — at the base stylesheet's 72% opacity,
     the white page behind it bled through and washed the bar out to a low-contrast gray,
     making the white nav text/logo hard to read. Same tone the homepage nav settles into
     once scrolled, kept constant here since there's no hero to reveal underneath. */
  .nav{ background:#0a0918; backdrop-filter:blur(10px); }
  .nav.nav--scrolled{ background:#0a0918; backdrop-filter:blur(10px); }

  /* "Computational AI" -> "Computational Biology & AI" is longer: give the nav a bit more
     room before it collapses to the burger, and tighten spacing slightly so it still fits. */
  @media (min-width:1181px) and (max-width:1260px){
    .nav__links{ gap:.85rem; }
    .nav__links a{ font-size:.78rem; }
  }
  @media (min-width:1181px){ .nav__links{ gap:1.1rem; } }

  /* Nav flyout v2: anchored inside nav__desktop-right (true right edge of the header),
     so it can never collide with the logo regardless of viewport width. Opens a floating
     dropdown panel below the trigger instead of pushing inline layout — the panel is
     position:absolute, so it overlays the page rather than displacing anything. */
  /* .nav has overflow:hidden (base stylesheet, used for the scroll-state transition) which
     was clipping this dropdown before it could ever become visible — open it up whenever
     the flyout is hovered or explicitly toggled open. */
  .nav:has(.nav__flyout:hover), .nav:has(.nav__flyout.is-open){ overflow:visible; }
  .nav__flyout{ position:relative; }
  .nav__flyout-trigger{
    display:flex; align-items:center; gap:.45rem;
    font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
    color:rgba(255,255,255,.75); background:transparent; border:1px solid rgba(255,255,255,.2);
    border-radius:999px; padding:.55rem 1rem; cursor:pointer; white-space:nowrap;
    transition:border-color .2s ease, color .2s ease;
  }
  .nav__flyout-trigger svg{ width:13px; height:13px; transition:transform .25s ease; }
  .nav__flyout-trigger:hover{ border-color:rgba(255,255,255,.4); color:#fff; }
  .nav__flyout:hover .nav__flyout-trigger svg,
  .nav__flyout.is-open .nav__flyout-trigger svg{ transform:rotate(180deg); }
  .nav__flyout .nav__links{
    display:flex; flex-direction:column; gap:.15rem; list-style:none; margin:0;
    position:absolute; top:calc(100% + .7rem); right:0; z-index:20; min-width:240px;
    background:#0a0918; border:1px solid rgba(255,255,255,.12); border-radius:1rem;
    padding:.5rem; box-shadow:0 24px 60px -20px rgba(0,0,0,.55);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .nav__flyout:hover .nav__links,
  .nav__flyout.is-open .nav__links{
    opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s;
  }
  .nav__flyout .nav__links li{ display:block; }
  .nav__flyout .nav__links a{
    display:block; padding:.65rem .85rem; border-radius:.6rem; font-size:.85rem;
    color:rgba(255,255,255,.75); white-space:nowrap; transition:background .15s ease, color .15s ease;
  }
  .nav__flyout .nav__links a:hover{ background:rgba(255,255,255,.07); color:#fff; }
  /* The header's decorative bottom accent line (.nav .nav-bar, z-index:4) and hairline
     (.nav::after, z-index:3) are nav-local pseudo/child elements painted after .nav .wrap
     (z-index:1) in the same stacking context, so they rendered on top of the flyout
     dropdown, which lives inside that wrap. Raise the wrap above them here instead of
     touching the shared accent-line rules. */
  .nav .wrap{ z-index:10; }
  @media (prefers-reduced-motion:reduce){ .nav__flyout .nav__links{ transition:none; } }
  @media (max-width:1180px){ .nav__flyout{ display:none; } }

  /* Section headlines: one consistent, larger scale everywhere (kills the inline 1.2/1.3rem shrink) */
  section.block h2, #pipeline h2{
    font-size:clamp(2rem,3.4vw,2.6rem) !important;
    line-height:1.12;
    letter-spacing:-.015em;
    max-width:24ch;
  }
  section.block p.sub, #pipeline .sub{
    font-size:1.08rem;
    line-height:1.65;
    max-width:62ch;
    margin:1.25rem 0 3rem;
  }

  /* Sections breathe a lot more — space, not lines, is what separates ideas here */
  section.block, #pipeline{ padding:5rem 0; }
  .cta{ padding:8rem 0 10rem; }
  /* -2px: kills the hairline seam some browsers render at the hero/next-section
     boundary (sub-pixel rounding on the 92vh hero height) by overlapping it. */
  header.top{ margin-bottom:-2px; }
  .hero__ctas{ margin-bottom:6.5rem; }
  #pipeline{ padding-top:6rem; position:relative; }

  /* Two sections are short (a few lines + one row of logos, or a single CTA link) —
     the uniform 7.5rem section padding leaves them feeling emptier than their content
     warrants, so they get a tighter rhythm of their own. */
  section.block.block--compact{ padding:3.5rem 0; }

  /* ---- 1. Encarts: two-layer soft shadow, no hairline border, radius doubled ----
     Layer 1 = tight contact shadow close to the card, for grounding on white.
     Layer 2 = large, soft, brand-tinted ambient shadow instead of a flat gray one. */
  .pkg-card, .ind, .partners span{ border:1px solid transparent; }
  .pkg-card{
    border-radius:1.4rem;
    padding:2.2rem 2rem;
    background:var(--deep);
    box-shadow:0 1px 2px rgba(18,19,42,.04), 0 26px 50px -26px rgba(18,19,42,.14), 0 30px 60px -30px rgba(192,0,96,.12);
    transition:transform .25s cubic-bezier(.22,.7,.2,1), box-shadow .25s ease, border-color .25s ease;
  }
  .pkg-card:hover{
    border-color:rgba(228,86,154,.3);
    transform:translateY(-4px);
    box-shadow:0 1px 2px rgba(18,19,42,.05), 0 32px 58px -26px rgba(18,19,42,.18), 0 34px 70px -28px rgba(192,0,96,.2);
  }
  .pkg-card__badge{ font-size:.66rem; }
  .pkg-card h3{ font-size:1.2rem; margin:0 0 .65rem; letter-spacing:-.01em; }
  .pkg-card p{ font-size:.98rem; line-height:1.62; }
  .pkg-grid{ gap:1.5rem; }

  .ind{
    border-radius:1.2rem;
    padding:1.4rem 1.5rem;
    background:var(--deep);
    box-shadow:0 1px 2px rgba(18,19,42,.04), 0 20px 40px -22px rgba(18,19,42,.12), 0 24px 48px -26px rgba(46,155,255,.12);
    transition:transform .25s cubic-bezier(.22,.7,.2,1), box-shadow .25s ease, border-color .25s ease;
    gap:1.05rem;
  }
  .ind:hover{
    border-color:rgba(228,86,154,.3);
    transform:translateY(-4px);
    box-shadow:0 1px 2px rgba(18,19,42,.05), 0 26px 46px -22px rgba(18,19,42,.16), 0 28px 56px -24px rgba(46,155,255,.2);
  }
  .ind__icn{ width:38px; height:38px; }
  .ind span{ font-size:.98rem; }
  .ind-grid{ gap:1.5rem; }

  .partners span{
    background:var(--deep);
    box-shadow:0 1px 2px rgba(18,19,42,.04), 0 16px 32px -20px rgba(18,19,42,.12);
    padding:.55rem 1.05rem;
    font-size:.74rem;
  }
  .partners{ gap:.85rem; }

  /* stepper labels a touch larger to match the new body scale */
  .stepper__step h5{ font-size:.95rem; }
  .stepper__step p{ font-size:.86rem; }

  /* platform-cta / buttons: slightly larger label for legibility at the new scale */
  .platform-cta{ font-size:.78rem; padding:.85rem 1.3rem; }

  /* CTA links ("Explore...", "See all...") recolored to a darkened version of the site's
     own blue (--s3), not an unrelated navy — same hue family, just deepened for contrast
     on white. Filling solid on hover. Scoped to #pipeline so the hero's dark ghost button
     is untouched. */
  .platform-cta, #pipeline .btn--ghost{
    color:#0a0918;
    border-color:color-mix(in srgb, #0a0918 30%, transparent);
  }
  .platform-cta:hover, #pipeline .btn--ghost:hover{
    background:#0a0918;
    border-color:#0a0918;
    color:#fff;
  }

  /* Partnership section: text left, photo right instead of a logo row */
  .partner-split{ display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; align-items:center; }
  .partner-split__img{
    width:100%; height:280px; object-fit:cover; border-radius:1.3rem;
    box-shadow:0 8px 16px rgba(10,9,24,.18), 0 32px 64px -20px rgba(10,9,24,.4);
  }
  @media (max-width:900px){ .partner-split{ grid-template-columns:1fr; gap:2rem; }
    .partner-split__img{ height:220px; order:-1; } }

  /* ---- 3. Pipeline, take two: flat tile grid instead of the animated rail/spine/node diagram.
     Same content, same brand colors per platform, but: bigger type throughout, no scroll-triggered
     JS, and no nested-link grid hack (the thing that broke alignment on mobile before). Every tile
     uses the same two-layer-shadow + doubled-radius language as the other encarts above. ---- */
  .pl-tag{
    font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--brand-magenta-deep); margin:0 0 1.5rem;
  }
  .pl-tag--divider{ margin-top:4rem; }
  .pl-grid{ display:grid; gap:1.5rem; }
  .pl-grid--3{ grid-template-columns:repeat(3,1fr); }
  .pl-grid--2{ grid-template-columns:repeat(2,1fr); }
  @media (max-width:900px){ .pl-grid--3{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:600px){ .pl-grid--3{ grid-template-columns:1fr; } .pl-grid--2{ grid-template-columns:1fr; } }

  .pl-tile{
    position:relative; display:block; text-align:left; text-decoration:none; color:inherit;
    border:1px solid transparent; border-radius:1.3rem; padding:1.9rem 1.75rem;
    background:var(--deep);
    box-shadow:0 1px 2px rgba(18,19,42,.04), 0 22px 46px -24px rgba(18,19,42,.13),
      0 26px 54px -28px color-mix(in srgb, var(--c,#38d6ff) 22%, transparent);
    transition:transform .25s cubic-bezier(.22,.7,.2,1), box-shadow .25s ease, border-color .25s ease;
  }
  .pl-tile--link:hover{
    transform:translateY(-4px);
    border-color:color-mix(in srgb, var(--c,#38d6ff) 40%, transparent);
    box-shadow:0 1px 2px rgba(18,19,42,.05), 0 28px 52px -24px rgba(18,19,42,.17),
      0 30px 64px -26px color-mix(in srgb, var(--c,#38d6ff) 38%, transparent);
  }
  .pl-tile__icon{
    width:46px; height:46px; border-radius:.85rem; display:grid; place-items:center; margin-bottom:1.1rem;
    background:color-mix(in srgb, var(--c,#38d6ff) 16%, transparent);
  }
  .pl-tile__icon svg{ width:22px; height:22px; stroke:var(--c,#38d6ff); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .pl-tile__idx{ position:absolute; top:1.9rem; right:1.75rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--mute); }
  .pl-tile h3{ font-family:var(--display); font-weight:600; font-size:1.1rem; margin:0 0 .5rem; letter-spacing:-.01em; color:var(--bone); }
  .pl-tile p{ font-family:var(--body); font-size:.95rem; line-height:1.55; color:var(--mute); margin:0; }
  .pl-tile__pill{
    display:inline-block; margin-top:1rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--mute); border:1px solid var(--hair); border-radius:999px; padding:.28rem .75rem;
    transition:color .2s ease, border-color .2s ease;
  }
  .pl-tile--link:hover .pl-tile__pill{ color:var(--bone); border-color:color-mix(in srgb, var(--c,#38d6ff) 50%, transparent); }

  .pl-tile--wide{ padding:2.3rem 2.15rem; }
  .pl-tile--accent h3{ font-size:1.25rem; }
  .pl-tile--accent p{ font-size:1rem; }
  .pl-tile--accent .pl-tile__icon{ width:54px; height:54px; }
  .pl-tile--accent .pl-tile__icon svg{ width:26px; height:26px; }

  .pl-axis{ margin:5.5rem 0 0; max-width:820px; display:flex; align-items:center; gap:1.25rem; font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; }
  .pl-axis .wet{ color:var(--s1); white-space:nowrap; }
  .pl-axis .dry{ color:var(--brand-magenta-tint); white-space:nowrap; }
  .pl-axis__track{ flex:1; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--s1) 0%,var(--gold) 55%,var(--brand-magenta-tint) 100%); }
  @media (max-width:600px){ .pl-axis{ flex-direction:column; align-items:flex-start; gap:.85rem; } .pl-axis__track{ width:100%; } }

  .pl-legend{ font-family:var(--body); font-size:1rem; line-height:1.65; color:var(--mute); max-width:64ch; margin:2rem 0 0; }
  .pl-legend strong{ color:var(--bone); font-weight:600; }

  /* Pipeline stays on the same white canvas as the rest of the page — only the header/nav,
     the hero photo, and the footer are dark. Just a bit more air around the labels here. */
  #pipeline .eyebrow{ margin-bottom:1.5rem; }
  #pipeline .sub{ margin-bottom:3.75rem; }
  #pipeline .pl-tag{ margin-bottom:2rem; }
  #pipeline .pl-tag--divider{ margin-top:5rem; }
  #pipeline .pl-legend{ margin-top:3rem; }
  #pipeline .pl-tile h3{ margin-bottom:.65rem; }

  /* ---- Section glows: the plainest text-only sections (no icons, no photo) get a soft,
     brand-tinted color wash in one corner — breaks up the flat white without adding
     any new image assets. Purely decorative, sits behind the content (z-index:0). ---- */
  [class*="sec-glow"]{ position:relative; }
  [class*="sec-glow"] > .wrap{ position:relative; z-index:1; }
  [class*="sec-glow"]::before{
    content:""; position:absolute; width:560px; height:560px; border-radius:50%;
    filter:blur(90px); z-index:0; pointer-events:none;
  }
  .sec-glow-cyan::before{ bottom:-220px; left:-160px; background:radial-gradient(circle, var(--s1) 0%, transparent 70%); opacity:.16; }
  .sec-glow-magenta::before{ top:-200px; left:-180px; background:radial-gradient(circle, var(--brand-magenta-tint) 0%, transparent 70%); opacity:.14; }
  .sec-glow-gold::before{ bottom:-240px; right:-140px; background:radial-gradient(circle, var(--gold-deep) 0%, transparent 70%); opacity:.16; }
  .sec-glow-blue::before{ top:-220px; left:-160px; background:radial-gradient(circle, var(--s3) 0%, transparent 70%); opacity:.13; }
  .sec-glow-purple::before{ bottom:-220px; left:-180px; background:radial-gradient(circle, var(--s5) 0%, transparent 70%); opacity:.13; }
  @media (max-width:600px){ [class*="sec-glow"]::before{ width:340px; height:340px; filter:blur(60px); } }

  /* Discrete grayscale cell-render motif, straddling the wet-lab/AI -> How it works
     section boundary. Already baked-in low opacity + edge fade in the PNG itself;
     kept static (no animation) and hidden on mobile so it stays a quiet texture,
     not a decorative "shape". Rounded + an extra mask-based fade on top of the PNG's
     own alpha so there's no hard rectangular edge at all. */
  .sec-cell-art-wrap{
    position:absolute; top:-330px; right:4%; width:500px; height:500px;
    z-index:0; pointer-events:none; user-select:none; overflow:hidden; border-radius:2rem;
  }
  .sec-cell-art-wrap::after{
    /* fades the right side of the image out into the page's own white background,
       instead of leaving a visible edge where the box ends. */
    content:""; position:absolute; inset:0;
    background:linear-gradient(to right, transparent 50%, var(--void) 92%);
  }
  .sec-cell-art{
    display:block; width:100%; height:100%; object-fit:cover;
    -webkit-mask-image:radial-gradient(ellipse at center, black 50%, transparent 82%);
    mask-image:radial-gradient(ellipse at center, black 50%, transparent 82%);
  }
  @media (max-width:900px){ .sec-cell-art-wrap{ width:340px; height:340px; top:-220px; right:2%; } }
  @media (max-width:600px){ .sec-cell-art-wrap{ display:none; } }

  /* This section's top hairline only needs to run under the text column, not all the
     way across under the cell-art image on the right — shorten it to ~half width
     instead of the default full-bleed section.block border-top. */
  section.sec-glow-cyan{ border-top:none; }
  .sec-glow-cyan::after{
    content:""; position:absolute; top:0; left:0; width:50%; height:1px;
    background:var(--hair); z-index:0;
  }
  @media (max-width:600px){ .sec-glow-cyan::after{ width:100%; } }