:root {
  --ink: #152e5c;
  --green: #00a96d;
  --paper: #f7f8fa;
  --max-width: 1220px;
  --page-gutter: clamp(1.25rem, 4vw, 4rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Poppins", Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1rem, 0.9rem + 0.25vw, 1.125rem);
  line-height: 1.58;
}

img { display: block; max-width: 100%; }

a { color: var(--green); text-underline-offset: 0.18em; }

.skip-link {
  position: fixed;
  z-index: 10;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.5rem 0.75rem;
  transform: translateY(-200%);
  color: white;
  background: var(--ink);
}

.skip-link:focus { transform: translateY(0); }

.section { width: min(var(--max-width), calc(100% - (var(--page-gutter) * 2))); margin-inline: auto; }

.site-header { display: grid; place-items: center; padding: clamp(2.25rem, 7vw, 6rem) var(--page-gutter) clamp(2.5rem, 7vw, 5.75rem); }

.brand { display: block; width: clamp(8rem, 16vw, 13.25rem); }
.brand img { width: 100%; height: auto; }

.hero { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: start; gap: clamp(2rem, 5.2vw, 5rem); }

.hero-image { margin: 0; min-width: 0; }

/* The responsive image fix: no fixed frame, no clipping, and no cover fit. */
.hero-image img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.hero-copy { min-width: 0; padding-top: 0.15rem; }
.hero-copy p { margin: 0 0 1.1em; }
.hero-copy p:last-child { margin-bottom: 0; }
.eyebrow { margin-top: 0; color: var(--green); font-weight: 600; font-size: 1.06em; }
strong { font-weight: 700; }

.team { padding-top: clamp(4rem, 11vw, 10.5rem); padding-bottom: clamp(4.5rem, 10vw, 9rem); }
h1, h2 { margin: 0; font-weight: 700; letter-spacing: -0.035em; }
h1 { font-size: clamp(2rem, 3.15vw, 3.15rem); line-height: 1.08; }
h2 { margin-top: 1rem; font-size: clamp(1.05rem, 1.3vw, 1.35rem); line-height: 1.2; }
.section-title { font-weight: 400; }

.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.3rem, 2.4vw, 2rem); margin-top: clamp(2rem, 4vw, 3.5rem); }
.profile { display: flex; flex-direction: column; min-width: 0; }
.profile-media { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.profile-media img { width: 100%; height: 100%; object-fit: cover; }
.profile p { margin: 0.75rem 0 0; font-size: 0.88em; }
.profile .role { margin-top: 0.9rem; font-weight: 600; }
.profile a { display: inline-block; width: fit-content; margin-top: 1rem; font-size: 0.9em; }

.backers { position: relative; overflow: hidden; padding: clamp(0.75rem, 1.5vw, 1.25rem) 0 clamp(0.5rem, 1vw, 0.75rem); background: linear-gradient(120deg, rgba(230, 242, 255, 0.92), rgba(249, 252, 231, 0.94)); }
.backers::before { content: ""; position: absolute; inset: 0; opacity: 0.17; background: url("assets/lab-background.jpeg") center / cover; }
.backers-inner { position: relative; }
.backer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: clamp(1rem, 3vw, 2.5rem); margin-top: clamp(0.35rem, 0.75vw, 0.5rem); }
.backer-grid img { width: min(11rem, 100%); margin: auto; aspect-ratio: 1; object-fit: contain; }

.site-footer { overflow: hidden; background: white; }
.footer-copy { padding-block: clamp(2.5rem, 6vw, 5rem); text-align: center; }
.footer-copy p { margin: 0.4rem 0; }

@media (max-width: 760px) {
  .site-header { place-items: start; padding-bottom: 2.5rem; }
  .brand { width: 8.25rem; }
  .hero { grid-template-columns: 1fr; gap: 1.75rem; }
  .hero-image { width: min(100%, 38rem); }
  .team-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .profile { max-width: 34rem; }
  .backer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
  :root { --page-gutter: 1rem; }
  .backer-grid { gap: 1rem; }
}