/*
 * Molgenium site shell: utility bar, header with full-width menu panels, mobile drawer,
 * search, breadcrumb, section sub-navigation and footer (rendered by assets/js/site-shell.js).
 * Everything is scoped to the shell's own ids so page styles (Tailwind or custom) cannot leak in.
 */
:root {
    --ms-white: #ffffff;
    --ms-ink: #16122b;
    --ms-ink-2: #4a4660;
    --ms-ink-3: #6e6a82;
    --ms-line: #e5e2ec;
    --ms-tint: #f6f3fd;
    --ms-brand: #7a00e6;
    --ms-brand-hover: #6200b8;
    --ms-brand-soft: #d9c6ff;
    --ms-deep: #1d0d45;
    --ms-font: Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
    --ms-shadow: 0 2px 4px rgba(22, 18, 43, .06), 0 18px 40px rgba(22, 18, 43, .12);
}

/* Each page's own header, mobile menu and footer are replaced by the shell */
html.ms-on body > header:not(.ms-keep),
html.ms-on body > #mobile-menu,
html.ms-on body > .mobile-menu,
html.ms-on #mobileMenu,
html.ms-on body > footer { display: none !important; }

.ms-wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.ms-utility, #ms-header, #ms-subnav, #ms-drawer, #ms-search, #ms-footer, .ms-crumbs { font-family: var(--ms-font); -webkit-font-smoothing: antialiased; line-height: 1.5; }
:is(.ms-utility, #ms-header, #ms-subnav, #ms-drawer, #ms-search, #ms-footer, .ms-crumbs) *, :is(.ms-utility, #ms-header, #ms-subnav, #ms-drawer, #ms-search, #ms-footer, .ms-crumbs) *::before, :is(.ms-utility, #ms-header, #ms-subnav, #ms-drawer, #ms-search, #ms-footer, .ms-crumbs) *::after { box-sizing: border-box; }
:is(#ms-header, #ms-drawer, #ms-search, #ms-footer) svg { width: 22px; height: 22px; flex: none; display: block; }
:is(#ms-header, #ms-drawer, #ms-search, #ms-footer, .ms-utility) :focus-visible { outline: 2px solid var(--ms-brand); outline-offset: 2px; }

/* ---------- Utility bar ---------- */
.ms-utility { background: var(--ms-deep); color: rgba(255, 255, 255, .8); font-size: 13px; }
.ms-utility .ms-wrap { display: flex; justify-content: space-between; align-items: center; height: 38px; gap: 24px; }
.ms-utility nav { display: flex; gap: 24px; }
.ms-utility a { color: inherit; text-decoration: none; }
.ms-utility a:hover { color: var(--ms-white); }

/* ---------- Header ---------- */
#ms-header { position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--ms-line); transition: box-shadow .25s; color: var(--ms-ink); }
#ms-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--ms-brand) 0, var(--ms-brand) 120px, transparent 120px); opacity: 0; transition: opacity .25s; }
#ms-header.ms-scrolled { box-shadow: 0 6px 24px rgba(22, 18, 43, .08); }
#ms-header.ms-scrolled::after { opacity: 1; }
#ms-header .ms-bar { display: flex; align-items: center; height: 92px; gap: 28px; transition: height .25s; }
#ms-header.ms-scrolled .ms-bar { height: 74px; }
.ms-brand { display: block; flex: none; line-height: 0; }
#ms-header .ms-brand img { height: 70px; width: auto; max-width: none; transition: height .25s; }
#ms-header.ms-scrolled .ms-brand img { height: 56px; }
#ms-header .ms-divider { width: 1px; height: 36px; background: var(--ms-line); flex: none; }

#ms-header .ms-menu { display: flex; align-items: stretch; gap: 4px; height: 100%; flex: 1; }
#ms-header .ms-dd { display: flex; align-items: stretch; }
#ms-header .ms-dd > button { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 100%; margin: 0; padding: 0 14px; border: 0; background: none; font: 500 15.5px/1 var(--ms-font); color: var(--ms-ink); cursor: pointer; }
#ms-header .ms-dd > button::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-3px); opacity: .55; transition: transform .2s; }
#ms-header .ms-dd > button::before { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; background: var(--ms-brand); transform: scaleX(0); transition: transform .2s; }
#ms-header .ms-dd:is(:hover, :focus-within, .ms-open, .ms-active) > button { color: var(--ms-brand); }
#ms-header .ms-dd:is(:hover, :focus-within, .ms-open, .ms-active) > button::before { transform: scaleX(1); }
#ms-header .ms-dd:is(:hover, :focus-within, .ms-open) > button::after { transform: rotate(-135deg) translateY(-2px); }

/* Every menu opens the same full-width panel */
#ms-header .ms-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--ms-white); border-top: 1px solid var(--ms-line); box-shadow: var(--ms-shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; }
#ms-header .ms-dd:is(:hover, :focus-within, .ms-open) .ms-panel { opacity: 1; visibility: visible; transform: none; }
#ms-header .ms-mega { display: grid; grid-template-columns: 1fr 360px; gap: 0 40px; padding-top: 32px; padding-bottom: 36px; }
#ms-header .ms-mega-title { grid-column: 1 / -1; margin: 0 0 12px; font: 600 12px/1.4 var(--ms-font); letter-spacing: .12em; text-transform: uppercase; color: var(--ms-ink-3); }
#ms-header .ms-mega-links { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; align-content: start; }
#ms-header .ms-mega-link { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border-radius: 6px; color: var(--ms-ink); text-decoration: none; transition: background .15s; }
#ms-header .ms-mega-link:hover { background: var(--ms-tint); }
#ms-header .ms-mega-link b { display: block; font-weight: 600; font-size: 16px; line-height: 1.35; }
#ms-header .ms-mega-link:hover b { color: var(--ms-brand); }
#ms-header .ms-mega-link small { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--ms-ink-3); }
#ms-header .ms-ico { flex: none; width: 44px; height: 44px; border-radius: 6px; background: var(--ms-tint); color: var(--ms-brand); display: grid; place-items: center; transition: background .15s, color .15s; }
#ms-header .ms-mega-link:hover .ms-ico { background: var(--ms-brand); color: var(--ms-white); }
#ms-header .ms-feature { position: relative; display: flex; align-items: flex-end; min-height: 230px; border-radius: 6px; overflow: hidden; color: var(--ms-white); text-decoration: none; }
#ms-header .ms-feature img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .4s; }
#ms-header .ms-feature::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20, 8, 50, .05) 25%, rgba(20, 8, 50, .9) 100%); }
#ms-header .ms-feature span { position: relative; z-index: 2; padding: 22px; font-weight: 600; font-size: 17px; line-height: 1.35; }
#ms-header .ms-feature small { display: block; margin-top: 8px; font-weight: 500; font-size: 14px; color: var(--ms-brand-soft); }
#ms-header .ms-feature:hover img { transform: scale(1.04); }

#ms-header .ms-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.ms-icon { width: 44px; height: 44px; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ms-ink); cursor: pointer; text-decoration: none; transition: background .15s, color .15s; }
.ms-icon:hover { background: var(--ms-tint); color: var(--ms-brand); }
.ms-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 20px; border: 1.5px solid var(--ms-brand); border-radius: 4px; background: var(--ms-brand); color: var(--ms-white) !important; font: 600 14.5px/1 var(--ms-font); text-decoration: none; transition: background .15s, border-color .15s; }
.ms-btn:hover { background: var(--ms-brand-hover); border-color: var(--ms-brand-hover); }
.ms-btn--outline { background: none; color: var(--ms-brand) !important; }
.ms-btn--outline:hover { background: var(--ms-brand); color: var(--ms-white) !important; }
#ms-header .ms-actions .ms-btn { margin-left: 10px; }
#ms-header .ms-burger { display: none; }

/* ---------- Section sub-navigation (account links, in-page anchors) ---------- */
#ms-subnav { position: sticky; top: 74px; z-index: 999; background: var(--ms-tint); border-bottom: 1px solid var(--ms-line); }
#ms-subnav[hidden] { display: none; }
#ms-subnav .ms-wrap { display: flex; align-items: center; gap: 28px; min-height: 52px; overflow-x: auto; }
#ms-subnav .ms-sub-title { font: 600 12px/1 var(--ms-font); letter-spacing: .12em; text-transform: uppercase; color: var(--ms-ink-3); white-space: nowrap; }
#ms-subnav nav { display: flex; gap: 6px; }
#ms-subnav a { padding: 8px 14px; border-radius: 4px; font: 500 14.5px/1.2 var(--ms-font); color: var(--ms-ink); text-decoration: none; white-space: nowrap; }
#ms-subnav a:hover { background: var(--ms-white); color: var(--ms-brand); }
#ms-subnav a[aria-current="page"] { background: var(--ms-white); color: var(--ms-brand); box-shadow: inset 0 -2px 0 var(--ms-brand); }

/* ---------- Breadcrumb inside the photo banners ---------- */
.ms-crumbs { position: absolute; top: 26px; left: 0; right: 0; z-index: 3; font-size: 13.5px; color: rgba(255, 255, 255, .7); text-align: left; }
.ms-crumbs .ms-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ms-crumbs a, .ms-crumbs span { color: rgba(255, 255, 255, .78) !important; text-decoration: none; }
.ms-crumbs a:hover { color: var(--ms-white) !important; text-decoration: underline; }
.ms-crumbs [aria-current] { color: var(--ms-white) !important; font-weight: 600; }
.ms-crumbs i { font-style: normal; opacity: .45; }

/* ---------- Mobile drawer ---------- */
#ms-drawer { position: fixed; inset: 0; z-index: 1100; overflow-y: auto; background: var(--ms-white); padding: 0 20px 32px; transform: translateX(-100%); transition: transform .3s ease; visibility: hidden; }
#ms-drawer.ms-open { transform: none; visibility: visible; }
#ms-drawer .ms-drawer-top { display: flex; justify-content: space-between; align-items: center; height: 76px; margin: 0 -20px 8px; padding: 0 20px; border-bottom: 1px solid var(--ms-line); }
#ms-drawer .ms-brand img { height: 56px; width: auto; max-width: none; }
#ms-drawer details { border-bottom: 1px solid var(--ms-line); }
#ms-drawer summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font: 600 17px/1.3 var(--ms-font); color: var(--ms-ink); cursor: pointer; }
#ms-drawer summary::-webkit-details-marker { display: none; }
#ms-drawer summary::after { content: "+"; font-weight: 400; font-size: 22px; color: var(--ms-brand); }
#ms-drawer details[open] summary::after { content: "−"; }
#ms-drawer details a { display: block; padding: 10px 0 10px 14px; border-left: 2px solid var(--ms-line); font-size: 16px; color: var(--ms-ink-2); text-decoration: none; }
#ms-drawer details a:hover { color: var(--ms-brand); border-left-color: var(--ms-brand); }
#ms-drawer details[open] { padding-bottom: 14px; }
#ms-drawer .ms-drawer-actions { display: grid; gap: 10px; margin-top: 28px; }

/* ---------- Search ---------- */
#ms-search { width: min(680px, calc(100vw - 32px)); margin: 96px auto auto; padding: 0; border: 0; border-radius: 10px; color: var(--ms-ink); box-shadow: 0 30px 80px rgba(20, 8, 50, .35); }
#ms-search::backdrop { background: rgba(20, 8, 50, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
#ms-search .ms-search-field { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--ms-line); color: var(--ms-brand); }
#ms-search input { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0 !important; outline: 0; box-shadow: none !important; background: none; font: 400 18px/1.4 var(--ms-font); color: var(--ms-ink); }
#ms-search kbd { font: 500 12px/1 var(--ms-font); color: var(--ms-ink-3); border: 1px solid var(--ms-line); border-radius: 4px; padding: 4px 6px; }
#ms-search-results { list-style: none; margin: 0; padding: 8px; max-height: 60vh; overflow-y: auto; }
#ms-search-results a { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; border-radius: 4px; color: var(--ms-ink); text-decoration: none; font-size: 15.5px; }
#ms-search-results small { color: var(--ms-ink-3); font-size: 13px; white-space: nowrap; }
#ms-search-results a:is(:hover, :focus) { background: var(--ms-tint); color: var(--ms-brand); outline: 0; }
#ms-search-results .ms-empty { padding: 16px 14px; color: var(--ms-ink-3); }

/* ---------- Footer ---------- */
#ms-footer { position: relative; isolation: isolate; margin-top: 90px; background: var(--ms-deep); color: rgba(255, 255, 255, .75); font-size: 15px; }
/* Wave edge rising out of the page above the footer, with a thin violet rule along its crest */
#ms-footer svg.ms-wave { position: absolute; left: 0; bottom: calc(100% - 1px); width: 100%; height: 90px; fill: var(--ms-deep); }
#ms-footer .ms-wave-line { fill: none; stroke: var(--ms-brand); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: .6; }
/* Amino-acid backdrop */
#ms-footer .ms-amino { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
#ms-footer .ms-amino span { position: absolute; display: block; transform: rotate(var(--r)); will-change: transform; }
#ms-footer .ms-amino svg { width: 100%; height: auto; fill: none; stroke: rgba(217, 198, 255, .22); stroke-width: 1.6; stroke-linecap: round; }
#ms-footer .ms-amino text { fill: rgba(217, 198, 255, .3); stroke: none; font: 500 10px var(--ms-font); }
#ms-footer .ms-amino text.ms-amino-name { font-size: 8px; letter-spacing: .14em; text-transform: uppercase; fill: rgba(217, 198, 255, .26); }
#ms-footer .ms-foot { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; padding: 64px 0 56px; }
#ms-footer .ms-brand img { height: 84px; width: auto; max-width: none; }
#ms-footer p { margin: 16px 0 24px; max-width: 320px; line-height: 1.6; }
#ms-footer h2 { margin: 0 0 18px; font: 600 13px/1.4 var(--ms-font); letter-spacing: .12em; text-transform: uppercase; color: var(--ms-white); }
#ms-footer a { display: block; color: rgba(255, 255, 255, .75); text-decoration: none; line-height: 2; }
#ms-footer a:hover { color: var(--ms-white); }
#ms-footer .ms-btn--ghost { display: inline-flex; line-height: 1; background: none; border-color: rgba(255, 255, 255, .55); }
#ms-footer .ms-btn--ghost:hover { background: var(--ms-white); border-color: var(--ms-white); color: var(--ms-deep) !important; }
/* Contact strip: three cells split by hairlines, like a business card row */
#ms-footer .ms-foot-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255, 255, 255, .14); }
#ms-footer .ms-foot-strip > * { display: flex; align-items: center; gap: 16px; padding: 26px 24px; line-height: 1.4; border-left: 1px solid rgba(255, 255, 255, .14); }
#ms-footer .ms-foot-strip > :first-child { border-left: 0; padding-left: 0; }
#ms-footer .ms-foot-strip svg { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--ms-brand-soft); }
#ms-footer .ms-foot-strip b { display: block; font: 600 12px/1.4 var(--ms-font); letter-spacing: .12em; text-transform: uppercase; color: var(--ms-white); margin-bottom: 2px; }
#ms-footer .ms-foot-strip a:hover span { color: var(--ms-white); }
#ms-footer .ms-foot-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px 0 32px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; }
#ms-footer .ms-foot-base a { display: inline; margin-left: 24px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
    #ms-header .ms-menu, #ms-header .ms-divider, #ms-header .ms-actions .ms-btn, #ms-header .ms-actions a.ms-icon, .ms-utility nav { display: none; }
    #ms-header .ms-burger { display: grid; }
    #ms-header .ms-bar { height: 76px; }
    #ms-header .ms-brand img { height: 58px; }
    #ms-subnav { top: 76px; }
    #ms-footer .ms-foot { grid-template-columns: 1fr 1fr; }
    #ms-footer .ms-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .ms-wrap { padding: 0 16px; }
    .ms-utility { display: none; }
    #ms-footer .ms-foot { grid-template-columns: 1fr; padding-top: 48px; }
    #ms-footer .ms-foot-strip { grid-template-columns: 1fr; }
    #ms-footer .ms-foot-strip > * { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
    #ms-footer .ms-foot-strip > :first-child { border-top: 0; }
    #ms-footer svg.ms-wave { height: 48px; }
    #ms-footer { margin-top: 48px; }
    .ms-crumbs { top: 16px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
    #ms-header *, #ms-drawer, #ms-header { transition: none !important; }
}

/* ---------- DNA helix parallax layer in dark bands (assets/js/bio-parallax.js) ---------- */
.bio-px { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bio-px--under { z-index: -1; }
.bio-px--over { z-index: 1; }
:is(.section--deep, section.cta) { position: relative; isolation: isolate; }
.bio-px > div { position: absolute; will-change: transform; }
/* Far layer: faint hexagonal lattice, faded in from the right */
.bp-lattice { top: -20%; bottom: -20%; right: 0; width: 60%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16.2v32.3L28 64.7 0 48.5V16.2ZM28 64.7V97' fill='none' stroke='%23d9c6ff' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 56px 97px; opacity: .07;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }
/* Near layer: the helix, fading out at both ends */
.bp-helix { top: -25%; height: 150%; right: -60px; width: 220px; color: #d9c6ff; opacity: .6;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%); }
.section--deep .bp-helix { opacity: .4; }
:is(.mg-hero, .hero, .cta) .bp-helix { opacity: .95; filter: drop-shadow(0 0 6px rgba(20, 8, 50, .5)); }
.bp-helix svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bp-strand { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .45; }
.bp-rung { stroke: currentColor; stroke-width: 1; opacity: .22; }
.bp-helix circle { fill: currentColor; }
@media (max-width: 860px) {
    .bp-helix { right: -60px; width: 160px; opacity: .35; }
    .bp-lattice { width: 100%; opacity: .05; }
}

/* ---------- Cookie consent bar ---------- */
#ms-cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1200; max-width: 1080px; margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 20px 24px; background: var(--ms-white); color: var(--ms-ink); border: 1px solid var(--ms-line); border-top: 3px solid var(--ms-brand); border-radius: 6px; box-shadow: 0 20px 60px rgba(20, 8, 50, .25); font: 400 15px/1.5 var(--ms-font); }
#ms-cookie p { margin: 0; flex: 1; }
#ms-cookie p a { color: var(--ms-brand); font-weight: 600; text-decoration: none; }
#ms-cookie p a:hover { text-decoration: underline; }
#ms-cookie small { display: block; margin-top: 6px; font-size: 13.5px; color: var(--ms-ink-3); }
#ms-cookie > div { display: flex; gap: 10px; flex: none; }
#ms-cookie .ms-btn { cursor: pointer; }
@media (max-width: 700px) { #ms-cookie { flex-direction: column; align-items: stretch; gap: 16px; } #ms-cookie > div > * { flex: 1; } }