/* ============================================================
   Garde Bioscience — design system (light)
   Brand: black + orange wordmark
   Audience: investors, clinicians/KOLs
   References: Karius, Guardant Health, Function Health
   ============================================================ */

/* ---- Caros font (brand typeface) ----
   Six weights/styles loaded. Note: Cretype's "Caros Bold" file actually
   has OS/2 weight 600 (SemiBold), so it's mapped here as 600. "Caros Heavy"
   is weight 800. There is no native 700 variant — CSS weight: 700 will
   fall to the closest available (600 or 800 depending on browser).
*/
@font-face { font-family: "Caros"; src: url("fonts/Caros-Light.otf")    format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Caros"; src: url("fonts/Caros-Regular.otf")  format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Caros"; src: url("fonts/Caros-Italic.otf")   format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Caros"; src: url("fonts/Caros-Medium.otf")   format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Caros"; src: url("fonts/Caros-Bold.otf")     format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Caros"; src: url("fonts/Caros-Heavy.otf")    format("opentype"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* Color */
  --bg:           #FCFAF6;
  --bg-warm:      #F4EDDF;
  --bg-cream:     #EDE2CB;       /* richer cream — stat strip, elevated sections */
  --bg-card:      #FFFFFF;
  --bg-tint:      #FFE7D2;
  --border:       rgba(58, 38, 18, 0.10);
  --border-hi:    rgba(58, 38, 18, 0.20);
  --text:         #1A0F08;
  --text-soft:    #3A2B1F;
  --text-mute:    #76665A;
  --text-faint:   #8A7A6E;       /* darkened from #A89989 — min 3.5:1 on --bg-warm */
  --accent:       #E85A14;       /* bright orange — backgrounds, icons, hover pops */
  --accent-text:  #B8420A;       /* darker orange — text on light bg — 5.3:1 on --bg */
  --accent-soft:  #FF8540;
  --accent-deep:  #96360A;       /* hover state for buttons */
  --accent-bg:    #FFE2C9;
  --accent-line:  rgba(232, 90, 20, 0.32);

  /* Type */
  --font-display: "Caros", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Caros", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing */
  --container:    1240px;
  --gutter:       clamp(20px, 4vw, 48px);
  --section-y:    clamp(72px, 10vw, 140px);

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ===== Skip link ===== */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  background: var(--accent-text);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: 14px;
  font-weight: 500;
  z-index: 9999;
  transition: top 0.15s;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ===== Focus styles ===== */
:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }
.btn:focus-visible          { border-radius: 999px; }
.nav__logo:focus-visible    { border-radius: var(--r-sm); }

/* ===== Typography ===== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
}
h1 { font-size: clamp(40px, 6.4vw, 84px); letter-spacing: -0.035em; font-weight: 500; }
h2 { font-size: clamp(30px, 3.8vw, 52px); letter-spacing: -0.028em; }
h3 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; font-weight: 500; }
h4 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
p  { margin: 0 0 1em; color: var(--text-soft); }
.lead { font-size: clamp(18px, 1.4vw, 22px); color: var(--text-soft); line-height: 1.55; max-width: 60ch; }

/* In two-col, the column already constrains width — remove inner max-width */
.two-col .lead { max-width: none; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 20px;
}
.eyebrow::before {
  content: ""; width: 32px; height: 2px; background: var(--accent-text);
}

.text-mute  { color: var(--text-mute); }
.text-soft  { color: var(--text-soft); }
.text-accent { color: var(--accent-text); }

/* ===== Layout ===== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section {
  padding: var(--section-y) 0;
  position: relative;
}
.section--narrow > .container { max-width: 920px; }
.section--bordered { border-top: 1px solid var(--border); }
.section--warm { background: var(--bg-warm); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ===== Top nav ===== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 88px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.nav__logo { display: inline-flex; align-items: center; gap: 12px; }
.nav__logo img { height: 56px; width: auto; }
.nav__menu {
  display: flex; gap: 36px; align-items: center;
  font-size: 14px;
  list-style: none; margin: 0; padding: 0;
}
.nav__menu a {
  color: var(--text-soft);
  transition: color 0.18s;
  position: relative;
}
.nav__menu a:hover { color: var(--text); }
.nav__menu a.active { color: var(--text); }
.nav__menu a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -24px;
  height: 1px; background: var(--accent);
}
.nav__cta { margin-left: 8px; }
.nav__toggle {
  display: none;
  background: transparent; border: 1px solid var(--border-hi);
  border-radius: 8px; padding: 8px; color: var(--text);
}
@media (max-width: 820px) {
  .nav__menu { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__menu.open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 88px; left: 0; right: 0;
    background: var(--bg); padding: 24px var(--gutter);
    border-bottom: 1px solid var(--border);
    z-index: 49;
  }
  .nav__menu.open a.active::after { display: none; }
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 24px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, background 0.18s, border-color 0.18s, color 0.18s;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
  background: var(--accent-text); color: #FFFFFF;
}
.btn--primary:hover { background: var(--accent-deep); color: #FFFFFF; }
.btn--ghost {
  background: transparent; color: var(--text); border-color: var(--border-hi);
}
.btn--ghost:hover { border-color: var(--text); }
.btn--link {
  background: transparent; color: var(--accent-text); padding: 0; height: auto;
  border-radius: 0; font-weight: 500;
}
.btn--link:hover { color: var(--accent); }
.btn .arrow { transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(3px); }

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: clamp(72px, 11vw, 140px) 0 var(--section-y);
  overflow: hidden;
  background: var(--bg);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 88% 0%, var(--accent-bg), transparent 60%),
    radial-gradient(ellipse 60% 45% at 0% 100%, var(--accent-bg), transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(232, 90, 20, 0.04) 100%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; max-width: 980px; }
.hero h1 .accent { color: var(--accent); }
.hero h1 .thin { font-weight: 300; color: var(--text-mute); }
.hero__sub { margin-top: 28px; font-size: clamp(18px, 1.45vw, 22px); color: var(--text-soft); max-width: 60ch; line-height: 1.5; }
.hero__cta { margin-top: 44px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero__meta {
  margin-top: 60px; padding-top: 32px;
  border-top: 1px solid var(--border);
  display: flex; gap: clamp(20px, 4vw, 60px); flex-wrap: wrap;
}
.hero__meta-item { font-size: 13px; color: var(--text-mute); max-width: 28ch; }
.hero__meta-item strong {
  display: block; color: var(--accent-text); font-size: 28px; font-weight: 600;
  font-family: var(--font-display); margin-bottom: 4px; letter-spacing: -0.02em;
}
@media (max-width: 600px) {
  .hero__meta { flex-direction: column; gap: 20px; }
  .hero__meta-item { max-width: none; }
}

/* ===== Page header (interior) ===== */
.pageheader {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0 clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  background: var(--bg);
}
.pageheader::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 70% at 95% 50%, var(--accent-bg), transparent 70%),
    radial-gradient(ellipse 30% 60% at 0% 100%, rgba(232, 90, 20, 0.06), transparent 70%);
  pointer-events: none;
}
.pageheader__inner { position: relative; z-index: 2; }
.pageheader h1 { font-size: clamp(40px, 5.5vw, 68px); }
.pageheader__sub { color: var(--text-soft); margin-top: 20px; max-width: 60ch; font-size: 19px; }

/* ===== Cards ===== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.card:hover { border-color: var(--border-hi); box-shadow: 0 4px 24px rgba(10, 10, 10, 0.07); }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--text-soft); margin: 0; }

.card--accent {
  background: var(--bg-tint);
  border-color: var(--accent-line);
}

.feature {
  padding: 28px 0;
  border-top: 1px solid var(--border);
}
.feature:first-child { border-top: 0; }
.feature__num {
  font-family: var(--font-display);
  font-size: 13px; color: var(--accent-text); letter-spacing: 0.16em;
  margin-bottom: 8px;
  font-weight: 600;
}
.feature h3 { margin-bottom: 8px; }
.feature p { color: var(--text-mute); max-width: 60ch; }

/* ===== Process steps ===== */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border); border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border);
}
.step {
  background: var(--bg-card); padding: 32px;
  min-height: 220px; display: flex; flex-direction: column; gap: 12px;
}
.step__num {
  font-family: var(--font-display); font-size: 12px; color: var(--accent-text);
  letter-spacing: 0.18em;
}
.step h4 { font-size: 18px; }
.step p { color: var(--text-mute); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ===== Stat strip ===== */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background-color: var(--bg-cream);
}
.stat { background: var(--bg-cream); padding: 48px var(--gutter); text-align: left; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 500;
  line-height: 1; letter-spacing: -0.03em;
  color: var(--accent-text);
  margin-bottom: 12px;
}
.stat__num .unit { color: var(--text); font-weight: 400; opacity: 0.55; }
.stat__label { color: var(--text-mute); font-size: 14px; line-height: 1.45; max-width: 36ch; }
@media (max-width: 900px) { .stats { grid-template-columns: 1fr; } }

/* ===== People grid ===== */
.people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 720px) { .people { grid-template-columns: 1fr; } }
.person {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.person:hover { border-color: var(--border-hi); box-shadow: 0 4px 24px rgba(10, 10, 10, 0.07); }
.person__avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--bg-tint);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 22px; color: var(--accent-text);
  border: 1px solid var(--accent-line);
  position: relative;
  overflow: hidden;
}
.person__avatar img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.person__name { font-family: var(--font-display); font-size: 19px; font-weight: 500; color: var(--text); margin: 0 0 2px; letter-spacing: -0.01em; }
.person__role { font-size: 13px; color: var(--accent-text); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 12px; }
.person__bio { font-size: 14.5px; color: var(--text-mute); line-height: 1.55; margin: 0; }

/* ===== Timeline ===== */
.timeline { position: relative; padding-left: 32px; }
.timeline::before {
  content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px;
  width: 1px; background: var(--border);
}
.tl-item { position: relative; padding: 0 0 32px; }
.tl-item::before {
  content: ""; position: absolute; left: -32px; top: 8px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent);
}
.tl-item__year {
  font-family: var(--font-display); font-size: 12px; color: var(--accent-text);
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 4px;
}
.tl-item__title { font-family: var(--font-display); font-size: 19px; color: var(--text); margin: 0 0 6px; letter-spacing: -0.01em; font-weight: 500; }
.tl-item__desc { color: var(--text-mute); font-size: 14.5px; margin: 0; line-height: 1.55; }

/* ===== Pull quote ===== */
.pullquote {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.25; letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--text);
  max-width: 28ch;
}
.pullquote .accent { color: var(--accent); }

/* ===== Form ===== */
.form { display: grid; gap: 18px; }
.form__row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.form label { font-size: 13px; color: var(--text-mute); display: block; margin: 0 0 8px; letter-spacing: 0.04em; text-transform: uppercase; }
.form input, .form select, .form textarea {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: inherit; font-size: 15px;
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  min-height: 48px;
}
.form textarea { min-height: 130px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

/* ===== CTA strip ===== */
.cta-strip {
  margin: var(--section-y) auto;
  max-width: var(--container);
  padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 64px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(ellipse 70% 100% at 100% 0%, var(--bg-tint), transparent 70%),
    radial-gradient(ellipse 50% 80% at 0% 100%, var(--accent-bg), transparent 70%),
    var(--bg-warm);
  border: 1px solid var(--accent-line);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cta-strip h2 { font-size: clamp(24px, 2.4vw, 34px); margin: 0; max-width: 24ch; }
.cta-strip p { color: var(--text-mute); margin: 8px 0 0; font-size: 15px; }

/* ===== Footer ===== */
.footer {
  border-top: 1px solid var(--border);
  padding: 60px 0 40px;
  margin-top: var(--section-y);
  background: var(--bg-warm);
}
.footer__top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px;
}
@media (max-width: 800px) { .footer__top { grid-template-columns: 1fr 1fr; } }
.footer__col h5 { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-mute); margin: 0 0 16px; font-weight: 500; }
.footer__col a { display: block; color: var(--text-soft); margin: 0 0 10px; font-size: 14px; transition: color 0.15s; }
.footer__col a:hover { color: var(--accent-text); }
.footer__brand p { color: var(--text-mute); font-size: 14px; margin: 16px 0 0; max-width: 36ch; }
.footer__logo { height: 64px; width: auto; }
.footer__bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-mute);
}

/* ===== Diagram block (technology) ===== */
.diagram {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 48px);
  background: var(--bg-warm);
}

/* ===== Two-col content ===== */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* ===== Misc ===== */
.divider { height: 1px; background: var(--border); margin: 48px 0; border: 0; }
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-hi);
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.tag--accent { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-bg); }

/* hr-bullets — SVG arrow replaces text glyph for screen reader cleanliness */
.hr-bullets { list-style: none; padding: 0; margin: 0; }
.hr-bullets li {
  padding: 16px 0; border-top: 1px solid var(--border);
  display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start;
}
.hr-bullets li:first-child { border-top: 0; }
.hr-bullets li::before {
  content: "";
  display: block;
  width: 18px; height: 18px;
  margin-top: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M3.5 9h11M10 4.5L14.5 9 10 13.5' stroke='%23B8420A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* Subtle scroll-in */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.is-visible { opacity: 1; transform: none; }
}