/* BIOLAIGY — shared styles (fonts linked from each page's ) */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} :root{ --void:#171717; --void-2:#1f1f1f; --panel:#242424; --panel-2:#2d2d2d; --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.17); --text:#ededed; --dim:#a6a6a6; --faint:#7c7c7c; --amber:#e9a13c; --amber-2:#f2bd72; --amber-deep:#a86a1e; --steel:#8fa6b6; --pad:clamp(1.25rem,5vw,3rem); --maxw:1180px; --head:64px; --f-display:"Space Grotesk","Roboto",system-ui,sans-serif; --f-body:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif; --f-mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace; } body{ background:var(--void); color:var(--text); font-family:var(--f-body); font-weight:400; font-size:clamp(1rem,.96rem + .25vw,1.1rem); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:clip; } h1,h2,h3,h4{font-family:var(--f-display);font-weight:500;line-height:1.15;letter-spacing:-.01em;color:#fff} h1{font-weight:600} p{max-width:64ch} a{color:var(--amber-2);text-decoration:none} a:hover{color:var(--amber)} img,video{display:block;max-width:100%;height:auto} strong{font-weight:700;color:#fff} ::selection{background:var(--amber);color:#1a1a1a} :focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} .eyebrow{ font-family:var(--f-mono);font-size:.8rem;font-weight:500; letter-spacing:.02em;color:var(--amber); display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1rem; } .eyebrow::before{content:"";width:26px;height:1px;background:var(--amber);display:inline-block} /* ---- buttons ---- */ .btn{ display:inline-flex;align-items:center;gap:.5rem; font-family:var(--f-display);font-size:.95rem;font-weight:500; padding:.8rem 1.4rem;border-radius:2px; background:var(--amber);color:#181818;border:1px solid var(--amber); transition:background .2s,border-color .2s,color .2s; cursor:pointer; } .btn:hover{background:var(--amber-2);border-color:var(--amber-2);color:#181818} .btn--ghost{background:transparent;color:var(--text);border-color:var(--line-strong)} .btn--ghost:hover{background:rgba(255,255,255,.05);color:#fff;border-color:var(--amber)} /* ---- skip link ---- */ .skip{position:fixed;top:.6rem;left:.6rem;z-index:200;background:var(--amber);color:#181818; padding:.5rem .9rem;border-radius:2px;font-weight:500;transform:translateY(-160%);transition:transform .2s} .skip:focus{transform:none} /* ---- header ---- */ .hdr{ position:fixed;inset:0 0 auto 0;z-index:100;height:var(--head); display:flex;align-items:center;justify-content:space-between; padding-inline:var(--pad); background:rgba(20,20,20,0); transition:background .3s,border-color .3s,backdrop-filter .3s; border-bottom:1px solid transparent; } .hdr.stuck{background:rgba(20,20,20,.92);backdrop-filter:blur(8px);border-bottom-color:var(--line)} .hdr::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(to bottom,rgba(10,10,10,.75),transparent);transition:opacity .3s} .hdr.stuck::before{opacity:0} .hdr__brand{display:flex;align-items:center;gap:.55rem} .hdr__brand .mark{width:12px;height:12px;border:2px solid var(--amber);border-radius:50%;flex-shrink:0} .hdr__brand .name{font-family:var(--f-display);font-weight:700;font-size:1.06rem;letter-spacing:.09em;color:#fff} .hdr__nav{display:flex;align-items:center;gap:clamp(.75rem,2.4vw,1.9rem)} .hdr__nav a:not(.btn){color:var(--dim);font-size:.92rem;padding-block:.4rem;border-bottom:1px solid transparent} .hdr__nav a:not(.btn):hover,.hdr__nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--amber)} .hdr__nav .btn{padding:.55rem 1rem;font-size:.88rem} @media (max-width:600px){ .hdr__nav{gap:.9rem} .hdr__nav a.hide-sm{display:none} .hdr__nav .btn{padding:.5rem .8rem} } /* ---- footer ---- */ .ftr{border-top:1px solid var(--line);background:var(--void-2);padding-block:2.6rem;margin-top:5rem} .ftr .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem} .ftr__brand{display:flex;align-items:center;gap:.55rem;margin-bottom:.9rem} .ftr__brand .mark{width:11px;height:11px;border:2px solid var(--amber);border-radius:50%} .ftr__brand .name{font-family:var(--f-display);font-weight:700;letter-spacing:.09em;color:#fff;font-size:1.05rem} .ftr .tag{color:var(--faint);font-family:var(--f-mono);font-size:.82rem} .ftr nav{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start} .ftr nav a{color:var(--dim);font-size:.9rem} .ftr nav a:hover{color:#fff} .ftr .legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:1.4rem;margin-top:.6rem; color:var(--faint);font-size:.8rem;font-family:var(--f-mono);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem} @media (max-width:640px){.ftr .wrap{grid-template-columns:1fr}} /* ---- generic section ---- */ main{padding-top:var(--head)} .section{padding-block:clamp(3.5rem,9vh,6.5rem)} .section--alt{background:var(--void-2)} .section__head{max-width:52ch;margin-bottom:clamp(2rem,5vh,3.5rem)} .section__head h2{font-size:clamp(1.9rem,4.5vw,2.9rem)} .section__head p{color:var(--dim);margin-top:1rem} /* ---- molecular divider ---- */ .mol{display:flex;align-items:center;gap:0;height:1px;background:var(--line);position:relative;margin-block:0} .mol::before,.mol::after{content:"";width:7px;height:7px;border:1.5px solid var(--amber);border-radius:50%;background:var(--void);position:absolute} .mol::before{left:12%}.mol::after{left:22%} /* ================= LANDING ================= */ .hero{position:relative;min-height:calc(100svh - var(--head));display:flex;align-items:center;isolation:isolate;overflow:clip} .hero__img{position:absolute;right:-3%;top:52%;transform:translateY(-50%);width:min(52%,680px);z-index:-1; -webkit-mask-image:linear-gradient(to left,#000 62%,transparent);mask-image:linear-gradient(to left,#000 62%,transparent)} .hero__inner{padding-block:6rem} .hero h1{font-size:clamp(2.4rem,6vw,4.4rem);max-width:16ch;letter-spacing:-.02em} .hero h1 em{font-style:normal;color:var(--amber)} .hero__sub{color:var(--dim);font-size:clamp(1.05rem,1.6vw,1.25rem);margin:1.6rem 0 2.2rem;max-width:46ch} .hero__cta{display:flex;flex-wrap:wrap;gap:.9rem} @media (max-width:820px){ .hero__img{width:74%;right:-16%;opacity:.28;mask-image:none;-webkit-mask-image:none} .hero__inner{padding-block:4rem} } .reveal{opacity:0;transform:translateY(16px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards} .reveal:nth-child(2){animation-delay:.07s}.reveal:nth-child(3){animation-delay:.14s}.reveal:nth-child(4){animation-delay:.21s} @keyframes rise{to{opacity:1;transform:none}} /* vision pillars */ .pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .pillar{background:var(--void);padding:clamp(1.4rem,3vw,2.2rem)} .pillar__n{font-family:var(--f-mono);font-size:.8rem;color:var(--amber);display:block;margin-bottom:.7rem} .pillar h3{font-size:1.2rem;margin-bottom:.5rem} .pillar p{font-size:.96rem;color:var(--dim);max-width:none} .pillar--wide{grid-column:1/-1;background:var(--panel);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem} .pillar--wide div{flex:1 1 22rem} @media (max-width:680px){.pillars{grid-template-columns:1fr}} .stat{display:flex;flex-wrap:wrap;align-items:baseline;gap:1rem 1.6rem;padding:clamp(1.6rem,4vw,2.6rem); max-width:860px; border:1px solid var(--line);border-left:3px solid var(--amber);background:var(--void-2)} .stat__fig{font-family:var(--f-display);font-weight:600;font-size:clamp(2.4rem,6vw,3.6rem);color:#fff;line-height:1;white-space:nowrap} .stat__txt{color:var(--dim);font-size:.98rem;flex:1 1 20rem} /* report teaser */ .teaser{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:1px solid var(--line);background:var(--void-2)} .teaser__media{position:relative;min-height:100%} .teaser__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .teaser__body{padding:clamp(1.6rem,4vw,2.8rem)} .teaser__body h2{font-size:clamp(1.6rem,3.2vw,2.2rem);margin-bottom:.8rem} .teaser__list{list-style:none;margin:1.4rem 0;display:flex;flex-wrap:wrap;gap:.5rem} .teaser__list li{font-family:var(--f-mono);font-size:.78rem;color:var(--dim);border:1px solid var(--line);padding:.3rem .6rem} @media (max-width:760px){.teaser{grid-template-columns:1fr}.teaser__media{min-height:220px}} /* ================= REPORT ================= */ .rhero{padding-block:clamp(3rem,8vh,5rem) 2rem} .rhero h1{font-size:clamp(2.2rem,5.5vw,3.6rem);max-width:18ch} .rhero p{color:var(--dim);margin-top:1.2rem;font-size:1.1rem;max-width:60ch} .jump{position:sticky;top:var(--head);z-index:40;background:rgba(20,20,20,.9);backdrop-filter:blur(8px); border-block:1px solid var(--line);margin-bottom:2.5rem} .jump .wrap{display:flex;gap:.3rem;overflow-x:auto;padding-block:.6rem;scrollbar-width:none} .jump .wrap::-webkit-scrollbar{display:none} .jump a{white-space:nowrap;font-family:var(--f-mono);font-size:.8rem;color:var(--dim);padding:.4rem .7rem;border:1px solid transparent} .jump a:hover{color:#fff} .jump a.active{color:var(--amber);border-color:var(--line)} .rsection{padding-top:calc(var(--head) + 1.5rem);margin-top:calc(-1 * var(--head) - 1.5rem);padding-bottom:clamp(3rem,7vh,5rem);border-bottom:1px solid var(--line)} .rsection>.wrap>.eyebrow{margin-top:0} .rsection h2{font-size:clamp(1.7rem,4vw,2.5rem);margin-bottom:1rem} .rsection h3{font-size:1.35rem;margin:2rem 0 .8rem} .rsection p{color:var(--dim)} .rsection p strong{color:var(--text)} .banner{width:100%;aspect-ratio:16/7;object-fit:cover;border:1px solid var(--line);margin:1.5rem 0 2rem} figure.vid{margin:1.5rem 0} figure.vid video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;border:1px solid var(--line)} figure.vid figcaption{font-family:var(--f-mono);font-size:.78rem;color:var(--faint);margin-top:.5rem} /* pillar grid w/ disclosure */ .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1.5rem} .pgrid details{background:var(--void);padding:0} .pgrid details[open]{grid-column:1/-1} .pgrid details[open] .detail{max-width:70ch} .pgrid summary{list-style:none;cursor:pointer;padding:1.3rem;display:block;transition:background .2s} .pgrid summary::-webkit-details-marker{display:none} .pgrid summary:hover{background:var(--panel)} .pgrid details[open] summary{background:var(--panel)} .pgrid .ico{font-size:1.3rem;display:block;margin-bottom:.5rem} .pgrid summary h4{font-size:1.05rem;margin-bottom:.3rem} .pgrid summary p{font-size:.88rem;color:var(--faint);max-width:none} .pgrid .detail{padding:0 1.3rem 1.3rem;font-size:.92rem;color:var(--dim)} .pgrid .detail img,.pgrid .detail video{margin-top:.8rem;border:1px solid var(--line)} @media (max-width:820px){.pgrid{grid-template-columns:1fr}} /* tabs */ .tabs{margin-top:1.5rem} .tabs__nav{display:flex;gap:.25rem;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none} .tabs__nav::-webkit-scrollbar{display:none} .tabs__btn{white-space:nowrap;background:none;border:none;border-bottom:2px solid transparent; color:var(--faint);font-family:var(--f-display);font-size:.9rem;padding:.7rem .9rem;cursor:pointer;transition:color .2s,border-color .2s} .tabs__btn:hover{color:var(--dim)} .tabs__btn[aria-selected="true"]{color:#fff;border-bottom-color:var(--amber)} .tabs__panel{padding-top:1.6rem} .tabs__panel[hidden]{display:none} /* sensor / card grids */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1rem} .cards--2{grid-template-columns:repeat(2,1fr)} .cards--sensors{grid-template-columns:repeat(4,1fr)} @media (max-width:960px){.cards--sensors{grid-template-columns:repeat(2,1fr)}} .card{background:var(--void);padding:1.4rem} .card h4{font-size:1.05rem;margin-bottom:.5rem;color:#fff} .card p{font-size:.92rem;color:var(--dim);max-width:none} .card ul{margin:.4rem 0 0;padding-left:1.1rem;color:var(--dim);font-size:.92rem} .card ul li{margin-bottom:.25rem} .card .ico{color:var(--amber);font-family:var(--f-mono);font-size:.8rem;display:block;margin-bottom:.5rem} .card img{margin-top:.9rem;border:1px solid var(--line);aspect-ratio:16/10;object-fit:cover;width:100%} @media (max-width:820px){.cards,.cards--2{grid-template-columns:1fr}} /* two-column compare */ .compare{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1.5rem} .compare>div{background:var(--void);padding:1.5rem} .compare h4{font-family:var(--f-mono);font-size:.85rem;color:var(--amber);margin-bottom:.9rem;font-weight:500} .compare ul{list-style:none;display:flex;flex-direction:column;gap:.55rem} .compare li{padding-left:1.1rem;position:relative;color:var(--dim);font-size:.95rem} .compare li::before{content:"";width:5px;height:5px;background:var(--amber);position:absolute;left:0;top:.6em} .compare>div:last-child h4{color:var(--steel)} .compare>div:last-child li::before{background:var(--steel)} @media (max-width:620px){.compare{grid-template-columns:1fr}} /* chart */ .chart-wrap{margin-top:2rem;border:1px solid var(--line);background:var(--void-2);padding:1.2rem} .chart-box{position:relative;height:min(46vw,340px)} .chart-cap{font-family:var(--f-mono);font-size:.78rem;color:var(--faint);margin-top:.7rem;text-align:center} /* callout */ .callout{border:1px solid var(--line);border-left:3px solid var(--amber);background:var(--void-2);padding:clamp(1.3rem,3vw,2rem);margin-top:1.8rem} .callout h3{margin-top:0} .callout ul{padding-left:1.1rem;color:var(--dim)} .callout.warn{border-left-color:#d9724e} .callout.good{border-left-color:#6c9e6e} /* ================= CONTACT ================= */ .contact{min-height:calc(100svh - var(--head));display:grid;place-items:center;text-align:center;padding-block:5rem} .contact__img{width:min(420px,80%);margin:0 auto 2.5rem;border:1px solid var(--line)} .contact h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:1rem} .contact p{color:var(--dim);margin:0 auto 2rem} .contact__mail{font-family:var(--f-mono);font-size:clamp(1rem,3vw,1.4rem);color:var(--amber); border:1px solid var(--line-strong);padding:.9rem 1.4rem;display:inline-block} .contact__mail:hover{background:rgba(233,161,60,.08);color:var(--amber-2)} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal{animation:none;opacity:1;transform:none} *{transition:none!important} }