/* Biomedics — shared styles: tokens, fonts, reset, nav, footer, buttons, pills.
   Breakpoints: desktop ≥ 1440, tablet 810–1439, mobile ≤ 809. */

@font-face {
  font-family: "TWK Continental Book";
  src: url("/assets/fonts/TWKContinental-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "TWK Continental Regular";
  src: url("/assets/fonts/TWKContinental-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --ink: rgb(38, 38, 40);
  --ink-2: rgb(87, 87, 87);
  --ink-3: rgb(195, 196, 197);
  --line: rgb(195, 196, 197);
  --line-soft: rgb(236, 237, 239);
  --paper: rgb(255, 255, 255);
  --paper-2: rgb(250, 250, 250);
  --footer: rgb(218, 223, 227);
  --burger: rgb(26, 29, 33);

  --font-book: "TWK Continental Book", sans-serif;
  --font-regular: "TWK Continental Regular", sans-serif;

  --page: 1200px;
  --gutter: 0px;
  --radius-card: 24px;
  --radius-pill: 100px;

  --ease-reveal: cubic-bezier(0.28, 0.41, 0.56, 1);
  --ease-button: cubic-bezier(0.06, 0.52, 0.56, 1);
  /* Framer spring (bounce 0.2, duration 0.4), sampled over 0.6 s */
  --spring: linear(0, 0.0529 2.5%, 0.173 5%, 0.3181 7.5%, 0.463 10%, 0.5938 12.5%, 0.7043 15%, 0.7931 17.5%, 0.8615 20%, 0.9122 22.5%, 0.9483 25%, 0.973 27.5%, 0.9891 30%, 0.999 32.5%, 1.0044 35%, 1.0077 40%, 1.0054 47.5%, 1.0023 55%, 1.0007 62.5%, 1 72.5%, 1);
  --spring-dur: 0.6s;
}

@media (max-width: 1439.98px) {
  :root { --gutter: 24px; }
}

@media (max-width: 809.98px) {
  :root { --gutter: 16px; }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-book);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, p, ul, figure { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Layout */
.container {
  width: 100%;
  max-width: calc(var(--page) + 2 * var(--gutter));
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Type presets. pre-wrap keeps the double spaces the copy was written with. */
[class^="t-"], [class*=" t-"] { white-space: pre-wrap; }
.t-display { font: 60px/60px var(--font-book); letter-spacing: -1.8px; }
.t-h2 { font: 52px/52px var(--font-book); }
.t-h3 { font: 44px/48.4px var(--font-book); letter-spacing: -0.88px; }
.t-h4 { font: 36px/39.6px var(--font-book); letter-spacing: -0.72px; }
.t-h5 { font: 28px/33.6px var(--font-book); letter-spacing: -0.28px; }
.t-h6 { font: 20px/24px var(--font-book); }
.t-body { font: 20px/24px var(--font-regular); }
.t-small { font: 14px/15.4px var(--font-book); }

@media (max-width: 1439.98px) {
  .t-display { font-size: 48px; line-height: 48px; letter-spacing: -1.44px; }
  .t-h2 { font-size: 34px; line-height: 34px; }
  .t-h3 { font-size: 34px; line-height: 37.4px; letter-spacing: -0.68px; }
  .t-h4 { font-size: 32px; line-height: 35.2px; letter-spacing: -0.64px; }
  .t-h5 { font-size: 24px; line-height: 28.8px; letter-spacing: -0.24px; }
  .t-body { font-size: 18px; line-height: 21.6px; }
}

@media (max-width: 809.98px) {
  .t-display { font-size: 36px; line-height: 36px; letter-spacing: -1.08px; }
  .t-h2 { font-size: 22px; line-height: 22px; }
  .t-h3 { font-size: 24px; line-height: 26.4px; letter-spacing: -0.48px; }
  .t-h4 { font-size: 26px; line-height: 28.6px; letter-spacing: -0.52px; }
  .t-h5 { font-size: 20px; line-height: 24px; letter-spacing: -0.2px; }
}

/* Buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 16px 24px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  font: 14px/15.4px var(--font-book);
  white-space: nowrap;
  transition: box-shadow 0.4s var(--ease-button);
}
/* Hover ring: sits just outside the pill (clipped), then closes in to 97 % × 94 %. */
.btn::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -2px;
  right: -1px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  pointer-events: none;
  transition: top 0.4s var(--ease-button), bottom 0.4s var(--ease-button), left 0.4s var(--ease-button), right 0.4s var(--ease-button);
}
.btn:hover::after { top: 2.9%; bottom: 3.1%; left: 1.1%; right: 2.2%; }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark::after { border-color: var(--paper); }
.btn--light { background: var(--paper); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.btn--light::after { border-color: var(--ink); }
.btn--light:hover { box-shadow: inset 0 0 0 1px rgba(195, 196, 197, 0); }
.btn--light:hover::after { top: 2.5%; bottom: 2.5%; left: 1.2%; right: 1.6%; }

/* Sliding arrow: the second chevron slides in from the left on hover */
.btn__arrow {
  position: relative;
  width: 16px;
  height: 16px;
  overflow: hidden;
  flex: none;
}
.btn__arrow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  transition: transform 0.4s var(--ease-button);
}
.btn__arrow img:first-child { transform: translateX(-20px); }
.btn:hover .btn__arrow img { transform: translateX(20px); }
.btn:hover .btn__arrow img:first-child { transform: translateX(0); }

/* Pills (eyebrow labels) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 6px 16px 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2);
  font: 14px/15.4px var(--font-book);
  white-space: nowrap;
}
.pill img { width: 20px; height: 20px; }

/* Icon in a ring */
.ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--line);
  flex: none;
}
.ring img { width: 24px; height: 24px; }

/* Navigation */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 80px;
  background: var(--paper);
  overflow: hidden;
}
.nav {
  display: flex;
  align-items: center;
  height: 48px;
  margin-top: 16px;
}
.nav__brand,
.nav__end {
  flex: 1 1 0;
  display: flex;
  align-items: center;
}
.nav__end { justify-content: flex-end; }
.nav__logo { width: 214px; height: 17px; }
.nav__links {
  display: flex;
  gap: 42px;
  margin: 0 10px;
}
.nav__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ink-2);
  font: 14px/15.4px var(--font-book);
}
.nav__link::after {
  content: "";
  width: 1px;
  height: 1px;
  background: var(--ink-2);
  opacity: 0;
  transition: width var(--spring-dur) var(--spring), opacity 0.2s ease;
}
.nav__link:hover::after { width: 100%; opacity: 1; }
.nav__burger { display: none; }
.nav__drawer { display: none; }

@media (max-width: 1439.98px) {
  .nav__logo { width: 154px; height: 13px; }
}

@media (max-width: 809.98px) {
  .site-header {
    height: 70px;
    transition: height 0.4s cubic-bezier(0.44, 0, 0.56, 1);
  }
  .site-header.is-open { height: 298px; }
  .nav { height: 32px; }
  .nav__logo { width: 171px; height: 14px; }
  .nav__links,
  .nav__end { display: none; }
  .nav__burger {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    margin-left: auto;
  }
  .nav__burger span {
    position: absolute;
    left: 5px;
    width: 22px;
    height: 2px;
    background: var(--burger);
    transition: transform 0.3s ease, top 0.3s ease;
  }
  .nav__burger span:first-child { top: 8px; }
  .nav__burger span:last-child { top: 22px; }
  .is-open .nav__burger span:first-child { top: 15px; transform: rotate(45deg); }
  .is-open .nav__burger span:last-child { top: 15px; transform: rotate(-45deg); }
  .nav__drawer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 24px;
  }
}

/* Footer */
.site-footer {
  position: relative;
  background: var(--footer);
  padding: 80px 16px;
  overflow: hidden;
}
.site-footer .container { padding: 0; }
.footer {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 40px;
  height: 260px;
  overflow: hidden;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  width: calc(50% - 20px);
  height: 15px;
}
.footer__logo { width: 128px; height: 11px; color: var(--ink-2); flex: none; }
.footer__rule { width: 1px; height: 15px; background: var(--ink-2); flex: none; }
.footer__tagline {
  display: flex;
  color: var(--ink-2);
  font: 14px/15.4px var(--font-book);
}
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: calc(25% - 30px);
}
.footer__title { color: var(--ink-2); font: 20px/24px var(--font-regular); }
.footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.footer__links a { color: var(--ink-2); font: 14px/15.4px var(--font-book); }
.footer__spacer { width: 100%; height: 60px; }
.footer__legal {
  width: calc(50% - 20px);
  color: var(--ink-3);
  font: 14px/15.4px var(--font-book);
}
.footer__social {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: calc(50% - 20px);
  height: 30px;
  color: var(--ink-3);
  font: 14px/15.4px var(--font-book);
}
.footer__social a { display: block; width: 30px; height: 30px; }
.footer__social img { width: 30px; height: 30px; }

@media (max-width: 1439.98px) {
  .site-footer { padding: 80px 24px; }
  .footer__brand { height: 31px; }
  .footer__tagline { flex-direction: column; flex: 1; }
  .footer__title { font-size: 18px; line-height: 21.6px; }
}

@media (max-width: 809.98px) {
  .site-footer { padding: 60px 24px; }
  .footer__brand { width: 100%; }
  .footer__col { width: calc(50% - 20px); }
  .footer__legal,
  .footer__social { width: 100%; }
}

/* Progressive blur along the bottom of the viewport */
.edge-blur {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  height: 180px;
  pointer-events: none;
}
.edge-blur span {
  position: absolute;
  inset: 0;
}
.edge-blur span:nth-child(1) { backdrop-filter: blur(0.078125px); -webkit-backdrop-filter: blur(0.078125px); mask-image: linear-gradient(rgba(0,0,0,0) 0%, #000 12.5%, #000 25%, rgba(0,0,0,0) 37.5%); }
.edge-blur span:nth-child(2) { backdrop-filter: blur(0.15625px); -webkit-backdrop-filter: blur(0.15625px); mask-image: linear-gradient(rgba(0,0,0,0) 12.5%, #000 25%, #000 37.5%, rgba(0,0,0,0) 50%); }
.edge-blur span:nth-child(3) { backdrop-filter: blur(0.3125px); -webkit-backdrop-filter: blur(0.3125px); mask-image: linear-gradient(rgba(0,0,0,0) 25%, #000 37.5%, #000 50%, rgba(0,0,0,0) 62.5%); }
.edge-blur span:nth-child(4) { backdrop-filter: blur(0.625px); -webkit-backdrop-filter: blur(0.625px); mask-image: linear-gradient(rgba(0,0,0,0) 37.5%, #000 50%, #000 62.5%, rgba(0,0,0,0) 75%); }
.edge-blur span:nth-child(5) { backdrop-filter: blur(1.25px); -webkit-backdrop-filter: blur(1.25px); mask-image: linear-gradient(rgba(0,0,0,0) 50%, #000 62.5%, #000 75%, rgba(0,0,0,0) 87.5%); }
.edge-blur span:nth-child(6) { backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); mask-image: linear-gradient(rgba(0,0,0,0) 62.5%, #000 75%, #000 87.5%, rgba(0,0,0,0) 100%); }
.edge-blur span:nth-child(7) { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); mask-image: linear-gradient(rgba(0,0,0,0) 75%, #000 87.5%, #000 100%); }
.edge-blur span:nth-child(8) { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); mask-image: linear-gradient(rgba(0,0,0,0) 87.5%, #000 100%); }

/* Entrance animations (set up by main.js; content stays visible without JS) */
.js [data-appear] {
  opacity: 0.001;
  transform: translateY(var(--appear-y, 20px));
}
.js [data-appear].is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--appear-dur, 0.5s) var(--appear-ease, ease) var(--appear-delay, 0s),
              transform var(--appear-dur, 0.5s) var(--appear-ease, ease) var(--appear-delay, 0s);
}
.js [data-reveal] { visibility: hidden; }
.js [data-reveal].is-split { visibility: visible; }
.reveal-token {
  display: inline-block;
  opacity: 0.001;
  filter: blur(10px);
  transform: translateY(30px);
}
.is-in > .reveal-token,
.is-in > .reveal-line > .reveal-token {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition: opacity 0.8s var(--ease-reveal), filter 0.8s var(--ease-reveal), transform 0.8s var(--ease-reveal);
  transition-delay: var(--d, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-appear], .reveal-token { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}