/* ============================================================
   Helio Genomics — Shared sitewide components
   Top announcement bar · Header/nav · Newsletter · Footer
   Single source of truth. Edit here + assets/site-shared.js
   to update these components across every page.
   Selectors are html-prefixed so they reliably override each
   page's older inline component styles without specificity wars.
   ============================================================ */

/* ---------- Top utility / announcement bar ---------- */
html .utility{background:linear-gradient(90deg,#f4fafc,#eaf6fa);color:var(--body);font-size:13.5px;border-bottom:1px solid var(--line-2)}
html .utility .wrap{display:flex;align-items:center;justify-content:space-between;height:44px}
html .utility a{color:var(--body);transition:color .2s}
html .utility a:hover{color:var(--teal-700)}
html .utility .promo strong{color:var(--teal-700);font-weight:700}
html .utility .promo strong:hover{color:var(--teal)}
html .utility .u-links{display:flex;gap:28px;font-weight:500}

/* ---------- Main nav (sticky glass) ---------- */
html .nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.7);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(231,237,242,.7);transition:box-shadow .3s,background .3s}
html .nav.scrolled{box-shadow:0 8px 30px rgba(20,84,116,.07);background:rgba(255,255,255,.86)}
html .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:82px}
html .brand img{height:40px;width:auto}
html .nav-links{display:flex;align-items:center;gap:2px}
html .nav-item{position:static}
html .nav-item>a{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--ink-2);padding:28px 14px;transition:color .2s;white-space:nowrap}
html .nav-item>a .chev{width:11px;height:11px;opacity:.55;transition:transform .25s}
html .nav-item:hover>a{color:var(--teal-700)}
html .nav-item:hover>a .chev{transform:rotate(180deg);opacity:1}
html .dropdown{position:absolute;top:100%;left:50%;transform:translate(-50%,12px);width:min(940px,94vw);background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border:1px solid rgba(255,255,255,.7);border-radius:24px;box-shadow:0 36px 84px rgba(20,84,116,.13);overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s var(--ease),transform .24s var(--ease);z-index:80}
html .nav-item:hover .dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
html .mega-inner{display:grid;grid-template-columns:1fr 1fr 1.12fr}
html .mega-col{padding:32px 32px}
html .mega-col.links-col{border-left:1px solid var(--line-2)}
html .mega-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-700)}
html .mega-desc{font-size:15px;color:var(--muted);line-height:1.62;margin-top:18px}
html .mega-links{display:flex;flex-direction:column;margin-top:2px}
html .mega-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 4px;border-bottom:1px solid var(--line-2);font-size:15px;font-weight:600;color:var(--ink-2);transition:color .2s,padding .2s}
html .mega-links a:last-child{border-bottom:0}
html .mega-links a:hover{color:var(--teal-700);padding-left:9px}
html .mega-links a svg{opacity:.35;transition:.2s;flex:none}
html .mega-links a:hover svg{opacity:1;transform:translate(2px,-2px)}
html .mega-news{background:var(--teal-50);display:flex;flex-direction:column;justify-content:center;padding:32px}
html .mega-news h4{font-size:18.5px;color:var(--ink);margin-top:14px;line-height:1.32;font-weight:700}
html .mega-news p{font-size:14px;color:var(--body);margin-top:12px;line-height:1.55}
html .mega-news .link-arrow{margin-top:18px;font-size:14px}
html .nav-cta{display:flex;align-items:center;gap:20px}
html .nav-cta .btn-primary{padding:10px 20px;font-size:14.5px;border-radius:10px;box-shadow:0 2px 8px rgba(246,161,31,.22)}
html .nav-cta .btn-primary:hover{box-shadow:0 4px 12px rgba(246,161,31,.32);transform:translateY(-1px)}
html .nav-cta .btn-primary .arr{width:15px;height:15px}
html .nav-contact{font-weight:600;font-size:15px;color:var(--ink-2);transition:color .2s}
html .nav-contact:hover{color:var(--teal-700)}
html .hamb{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
html .hamb span{width:24px;height:2.5px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
html .hamb.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
html .hamb.open span:nth-child(2){opacity:0}
html .hamb.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
html .mobile-menu{position:fixed;top:122px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 36px 84px rgba(20,84,116,.13);padding:10px 22px 26px;display:none;flex-direction:column;z-index:55;max-height:72vh;overflow:auto}
html .mobile-menu.open{display:flex}
html .mobile-menu .mlabel{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-700);padding:18px 6px 6px}
html .mobile-menu a{padding:12px 6px;font-weight:600;font-size:15.5px;color:var(--ink-2);border-bottom:1px solid var(--line-2)}

/* ---------- Newsletter + Footer (light) ---------- */
html .footer{background:linear-gradient(180deg,#f7fbfc,#edf4f8);color:var(--body);padding:0 0 40px;border-top:1px solid var(--line-2)}
html .newsletter{background:transparent;border-bottom:1px solid var(--line)}
html .newsletter .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:40px 32px;flex-wrap:wrap}
html .newsletter-copy{max-width:520px}
html .newsletter h3{color:var(--ink);font-size:20px;letter-spacing:-.01em}
html .newsletter p{font-size:14.5px;margin-top:5px;color:var(--muted)}
html .nlform{display:flex;gap:10px;flex:0 0 auto}
html .nlform input{background:#fff;border:1px solid var(--line);border-radius:999px;padding:0 20px;height:48px;color:var(--ink);font-family:inherit;font-size:14.5px;width:260px;outline:none;transition:border-color .25s,box-shadow .25s}
html .nlform input::placeholder{color:var(--muted)}
html .nlform input:focus{border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-50)}
html .nlform .btn-teal{height:48px;padding:0 26px;flex:0 0 auto}
html .foot-main{padding-top:58px}
html .foot-grid{display:grid;grid-template-columns:1.4fr 2fr 1.1fr;gap:48px;padding-bottom:44px;border-bottom:1px solid var(--line)}
html .foot-brand img{height:46px;width:auto;margin-bottom:20px;opacity:1}
html .foot-brand p{font-size:14px;line-height:1.7;max-width:280px;color:var(--body)}
html .foot-links{display:flex;flex-wrap:wrap;gap:12px 30px;align-content:flex-start}
html .foot-links a{font-size:14.5px;color:var(--ink-2);transition:color .2s}
html .foot-links a:hover{color:var(--teal-700)}
html .foot-contact h4{color:var(--ink);font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
html .foot-contact p{font-size:14px;line-height:1.8}
html .foot-contact p strong{color:var(--ink)}
html .foot-contact a{color:var(--teal-700)}
html .legal{font-size:12.5px;line-height:1.7;color:var(--muted);margin-top:28px;max-width:1000px}
html .copy{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:center;margin-top:22px;font-size:13px;color:var(--muted)}
html .copy a{color:var(--muted)}
html .copy a:hover{color:var(--teal-700)}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  html .nav-links,html .nav-contact{display:none}
  html .hamb{display:flex}
}
@media(max-width:900px){
  html .foot-grid{grid-template-columns:1fr;gap:34px}
  html .newsletter .wrap{justify-content:flex-start}
  html .nlform{width:100%}
  html .nlform input{width:auto;flex:1;min-width:0}
}
@media(max-width:640px){
  html .utility .promo{display:none}
}