/* QBIO static site styles (UTF-8)
   Key knobs:
   - Logo size: set --logo-height below.
   - Sticky header anchor offset: set --nav-height below (match your navbar actual height).
*/
:root{
  --qbio-green:#198754;
  --qbio-dark:#0b1b14;
  --qbio-text:#142019;
  --qbio-muted:#f6f8f7;
  --qbio-border:#e6ece8;
  --qbio-link:#0b5ed7;

  --logo-height: 54px;  /* <- change this */
  --nav-height: 80px;   /* <- change this if you change navbar sizing */
}

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-height); }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--qbio-text);
}

a{ color: var(--qbio-link); }
a:focus, button:focus{
  outline: 3px solid #000;
  outline-offset: 2px;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:1rem;
  top:1rem;
  width:auto;
  height:auto;
  padding:.5rem .75rem;
  background:#000;
  color:#fff;
  z-index:9999;
  border-radius:.5rem;
}

.navbar{
  border-bottom: 1px solid var(--qbio-border);
  background: #fff;
}

.brand-lockup{
  display:flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color:inherit;
  font-weight:600;
}
.navbar .brand-lockup img{
  height: var(--logo-height) !important;
  width: auto !important;
  max-height: none !important;
}

.hero{
  background: url('images/hero.png') center/cover no-repeat;
  min-height: 56vh;
  display:flex;
  align-items:center;
  position:relative;
  color:#fff;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.50);
}
.hero .container{ position:relative; z-index:2; }
.hero h1{
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  line-height:1.1;
  margin-bottom:.75rem;
}
.hero p{
  max-width: 75ch;
  font-size: 1.05rem;
  opacity:.95;
}
.hero .btn{
  border-radius: 999px;
  padding: .75rem 1.25rem;
  font-weight: 600;
}
.btn-primary{
  background-color: var(--qbio-green);
  border-color: var(--qbio-green);
}
.btn-outline-light{ border-radius:999px; }

.section{ padding: 3rem 0; }
.section-muted{
  background: var(--qbio-muted);
  border-top: 1px solid var(--qbio-border);
  border-bottom: 1px solid var(--qbio-border);
}

.section-title{
  margin-bottom: 1rem;
}
.kicker{
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .85rem;
  color: #3b5a49;
  font-weight: 600;
}

.card{
  border: 1px solid var(--qbio-border);
  border-radius: 14px;
}

.section-image{
  width:100%;
  height:auto;
  border-radius: 16px;
  border: 1px solid var(--qbio-border);
}

.small-muted{ color:#51655a; font-size:.98rem; }

.badge-soft{
  background: #e7f5ee;
  color: #0b3d28;
  border: 1px solid #cfeadf;
  font-weight: 600;
}

.anchor-target{ scroll-margin-top: var(--nav-height); }

.footer{
  border-top: 1px solid var(--qbio-border);
  padding: 2rem 0;
}