*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }

/* ─── Tokens ─────────────────────────────────────────────── */
:root {
  --red:        #ED2738;
  --blue:       #0047FF;
  --black:      #0A0A0A;
  --white:      #FFFFFF;
  --grey:       #6B7280;
  --border:     #E5E7EB;
  --grey-light: #F4F4F5;
}

html { font-size:16px; scroll-behavior:smooth }
body { font-family:'Inter',sans-serif; background:var(--white); color:var(--black); -webkit-font-smoothing:antialiased }

/* ═══════════════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════════════ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(255,255,255,.96); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  height:72px; padding:0 48px;
  display:flex; align-items:center; justify-content:space-between;
}

/* Desktop nav links */
.nav-links {
  display:flex; align-items:center; gap:32px;
}
.nav-links a {
  font-size:14px; font-weight:500; color:var(--grey);
  text-decoration:none; transition:color .2s; white-space:nowrap;
}
.nav-links a:hover { color:var(--black) }

/* Desktop CTA — visible by default, hidden on mobile */
.nav-cta-desktop {
  display:inline-flex;
}

/* Mobile CTA inside menu — hidden by default */
.nav-cta-mobile {
  display:none !important;
}

/* ─── Hamburger button ─── */
.hamburger {
  display:none;                     /* hidden on desktop */
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:40px; height:40px;
  background:none; border:none;
  cursor:pointer; padding:4px;
  border-radius:8px;
  flex-shrink:0;
}
.hamburger span {
  display:block;
  width:22px; height:2px;
  background:var(--black);
  border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
  transform-origin:center;
}

/* Animated X state */
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

/* ─── Mobile overlay backdrop ─── */
.nav-overlay {
  display:none;
  position:fixed; inset:0; z-index:150;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .3s ease;
}
.nav-overlay.open {
  display:block;
  opacity:1;
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:13px 24px; border-radius:100px;
  font-family:'Inter',sans-serif; font-size:14px; font-weight:600;
  text-decoration:none; border:none; cursor:pointer;
  transition:all .2s; white-space:nowrap; width:100%;
}
.btn-sm { padding:10px 22px; font-size:13px; width:auto }
.btn-red  { background:var(--red);  color:white }
.btn-red:hover  { background:#D41F30; transform:translateY(-1px) }
.btn-blue { background:var(--blue); color:white }
.btn-blue:hover { background:#003DD4; transform:translateY(-1px) }

/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
.hero {
  padding-top:72px; min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding-left:48px; padding-right:48px; padding-bottom:72px;
}
.hero-inner { max-width:860px; width:100%; padding-top:52px }

h1 {
  font-family:'Figtree',sans-serif; font-weight:800;
  font-size:clamp(34px,4vw,54px); letter-spacing:-1.8px; line-height:1.08;
  color:var(--black); margin-bottom:20px;
}
.hero-sub {
  font-size:clamp(15px,1.6vw,18px); line-height:1.65;
  color:var(--grey); max-width:520px; margin:0 auto 48px;
}

/* ═══════════════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════════════ */
.cards {
  display:grid; grid-template-columns:1fr 1fr;
  gap:20px; max-width:1060px; width:100%;
  margin:0 auto; text-align:left;
}
.card {
  border-radius:24px; padding:44px 40px 36px;
  border:1.5px solid var(--border);
  display:flex; flex-direction:column;
  transition:transform .25s, box-shadow .25s;
  background:var(--white);
}
.card:hover { transform:translateY(-4px); box-shadow:0 20px 60px rgba(0,0,0,.07) }
.card.labs { border-top:4px solid var(--red)  }
.card.meds { border-top:4px solid var(--blue) }
.card-logo  { margin-bottom:28px }
.card h2 {
  font-family:'Figtree',sans-serif; font-weight:800;
  font-size:clamp(20px,1.8vw,26px); letter-spacing:-.6px; line-height:1.25;
  color:var(--black); margin-bottom:24px;
}
.card-bullets {
  list-style:none; margin-bottom:24px;
  display:flex; flex-direction:column; gap:11px;
}
.card-bullets li {
  display:flex; align-items:center; gap:10px;
  font-size:15px; font-weight:600; color:var(--black);
}
.check {
  width:21px; height:21px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:white;
}
.labs .check { background:var(--red)  }
.meds .check { background:var(--blue) }
.card-tagline {
  font-size:14px; color:var(--grey); font-style:italic;
  border-top:1px solid var(--border); padding-top:18px;
}
.card-spacer { flex:1; min-height:24px }
.card-btn { display:block; width:100% }
.card-disclaimer {
  height:36px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:#9CA3AF; font-style:italic;
  margin-top:10px;
}

/* ═══════════════════════════════════════════════════════════
   MISSION STRIP
═══════════════════════════════════════════════════════════ */
.mission-strip {
  background:var(--black); padding:22px 48px; text-align:center;
}
.mission-strip p {
  font-family:'Figtree',sans-serif; font-weight:600;
  font-size:clamp(14px,1.4vw,17px);
  color:rgba(255,255,255,.85); letter-spacing:.1px;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
footer {
  background:var(--grey-light); border-top:1px solid var(--border);
  padding:60px 48px 40px;
}
.footer-inner { max-width:1060px; margin:0 auto }
.footer-top {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:60px; margin-bottom:44px;
}
.footer-brand-desc {
  font-size:13px; color:var(--grey);
  line-height:1.75; margin-top:18px; max-width:280px;
}
.footer-col h5 {
  font-family:'Figtree',sans-serif; font-weight:700;
  font-size:13px; color:var(--black); margin-bottom:14px;
}
.footer-col a {
  display:block; font-size:13px; color:var(--grey);
  text-decoration:none; margin-bottom:9px;
}
.footer-col a:hover { color:var(--black) }
.footer-bottom {
  border-top:1px solid var(--border);
  padding-top:22px; font-size:11px; color:#9CA3AF; line-height:1.75;
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET  (≤ 1024px)
═══════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  nav { padding:0 32px }
  .hero { padding-left:32px; padding-right:32px }

  .footer-top {
    grid-template-columns:1fr 1fr;
    gap:40px;
  }

  .mission-strip { padding:22px 32px }
  footer { padding:48px 32px 32px }
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE  (≤ 768px)
═══════════════════════════════════════════════════════════ */
@media (max-width:768px) {

  /* ── Nav shell ── */
  nav { padding:0 20px; height:90px }

  /* ── Show hamburger, hide desktop CTA ── */
  .hamburger { display:flex }
  .nav-cta-desktop { display:none !important }

  /* ── Mobile slide-down menu ── */
  .nav-links {
    position:fixed;
    top:83px; left:0; right:0;
    z-index:180;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:#fff;
    border-bottom:1px solid var(--border);
    padding:16px 20px 24px;
    /* hidden state */
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:transform .3s ease, opacity .3s ease;
    /* shadow for depth */
    box-shadow:0 12px 32px rgba(0,0,0,.1);
  }
  .nav-links.open {
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .nav-links a {
    padding:14px 4px;
    font-size:16px;
    border-bottom:1px solid var(--border);
  }
  .nav-links a:last-of-type { border-bottom:none }

  /* Show CTA inside mobile menu */
  .nav-cta-mobile {
    display:flex !important;
    width:100% !important;
    margin-top:16px;
    justify-content:center;
    border-bottom:none !important;
  }

  /* ── Hero ── */
  .hero {
    padding-left:20px; padding-right:20px;
    padding-bottom:48px;
    min-height:auto;
  }
  .hero-inner { padding-top:43px }
  .footer-top {
    margin-bottom: 20px !important;
}

  h1 { letter-spacing:-1px }

  /* ── Cards: single column ── */
  .cards {
    grid-template-columns:1fr;
    gap:16px;
  }
  .card { padding:32px 24px 28px }

  /* ── Mission strip ── */
  .mission-strip { padding:20px 20px }

  /* ── Footer ── */
  footer { padding:40px 20px 28px }
  .footer-top {
    grid-template-columns:1fr;
    gap:28px;
  }
  .footer-brand-desc { max-width:100% }
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE  (≤ 400px)
═══════════════════════════════════════════════════════════ */
@media (max-width:400px) {
  .card { padding:24px 18px 22px }
  .card h2 { font-size:18px }
  .card-bullets li { font-size:14px }
}

.btn-blue{
  color: white !important;
}