/* =========================================================
   THEME VARIABLES
========================================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

:root{
  /* Colors & radii */
  --bg:#0b0f1a; --surface:#11182a; --text:#e6e9f2; --muted:#9aa4bf;
  --accent:#e9e8f1; --accent-2:#3fa3ff; --card:#161e33; --border:rgba(255,255,255,.08);
  --radius:16px;

  /* Background gradient */
  --bg-1:#030a27; --bg-2:#01040b; --bg-3:#0f1426;

  /* Motion (legacy) */
  --float-y:28px; --float-rot:1.4deg; --float-dur:4.5s;

  /* Layout */
  --page-w:min(1400px,96%);
}

/* =========================================================
   BASE
========================================================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:18px; line-height:1.55; color:var(--text);
  background:linear-gradient(135deg,var(--bg-1) 0%,var(--bg-2) 50%,var(--bg-3) 100%);
  background-attachment:fixed;
}
.container{
  width: 100%;              /* always fill the viewport width */
  max-width: var(--page-w); /* cap at 1100px on large screens */
  margin: 0 auto;           /* center on desktop */
  padding: 0 16px;          /* small side padding everywhere */
}

.section{padding:72px 0;scroll-margin-top:80px}
.section.alt{background:linear-gradient(180deg,transparent,rgba(255,255,255,.02))}
h1,h2,h3,h4{margin:0 0 12px}
h1{font-size:clamp(40px,7vw,68px);letter-spacing:.5px}
h2{font-size:clamp(28px,5vw,42px)}

/* LinkedIn link style under each founder card */
.member-links .lnk-linkedin,
.member-links .lnk-linkedin:visited {
  color: #6fc0ff;           /* your light blue */
  text-decoration: none;
}

.member-links .lnk-linkedin:hover {
  color: #9ad2ff;           /* a bit brighter on hover (optional) */
  text-decoration: underline;
}

.member-links .lnk-linkedin:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

/* If you included an inline SVG/icon inside the link, tint it too */
.member-links .lnk-linkedin svg {
  fill: currentColor;
}


/* =========================================================
   HEADER & NAV
========================================================= */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,15,26,.7);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;gap:16px;padding:16px 0}
.logo{display:flex;align-items:center;gap:14px;color:var(--text);font-weight:700;text-decoration:none}
.site-header .logo img, img.logo-img{height:120px;width:auto;display:block}
.logo span{font-size:clamp(24px,3vw,40px);font-weight:800;line-height:1.1;white-space:nowrap}
.site-header .nav nav{margin-left:auto;display:flex;gap:20px;align-items:center}
nav a{color:var(--muted);text-decoration:none;font-weight:600;font-size:16px}
nav a:hover{color:var(--text)}
.hamburger{display:none;background:none;border:0;font-size:22px;color:var(--text)}

/* =========================================================
   HERO
========================================================= */
.hero{
  position: relative;
  padding: 72px 0 40px;
  overflow: hidden;
}

/* Main hero layout (desktop/tablet) */
.hero .hero-inner{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: var(--page-w);
  margin-inline: auto;
}

/* LEFT: text */
.hero-text{
  flex: 1 1 auto;               /* take the remaining space */
  max-width: 640px;             /* cap so it stays in 2 lines & away from image */
}

.hero-headline{
  margin: 0;
  font-weight: 900;
  color: #6be6ff;
  letter-spacing: .02em;
  line-height: 1.12;
  font-size: clamp(28px, 4.6vw, 48px);
}
/* Default (phones / general): allow lines to wrap if needed */
.hero-headline .hl-line{
  display: block;
  white-space: normal;
}

/* Desktop: force exactly 2 lines (no wrapping inside each span) */
@media (min-width: 900px){
  .hero-headline .hl-line{
    white-space: nowrap;
  }

  /* Desktop-only nudge of the antibody image */
  .hero-image{
    transform: translateX(5vw);
  }
}
/* RIGHT: image */
.hero-image{
  flex: 0 0 auto;
  width: min(40vw, 520px);
  max-width: 520px;
  display: flex;
  justify-content: flex-end;
  position: relative;
  /* no transform here in the base rule */
}
.hero-img{
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.45));
}


/* DegrAb label on the image */
.hero-label{
  position: absolute;
  right: clamp(-20px);
  bottom: clamp(-10px);
  padding: 0;                           /* no extra box */
  font-weight: 700;
  font-size: clamp(20px, 2.8vw, 32px);
  color: #bfeeff;
  background: transparent;              /* no rectangle */
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  line-height: 1;
  letter-spacing: .03em;
}

.hero-label .tm{
  font-size: .6em;
  margin-left: 6px;
  vertical-align: text-top;
  font-weight: 800;
}

/* Background antibodies */
.bg-antibodies{
  position:absolute;
  inset:-6% -2% -6% -2%;
  z-index:1;
  pointer-events:none;
}
.bg-antibodies .bg{
  position:absolute;
  height:auto;
  opacity:.3;
  filter:blur(.2px);
  transform:rotate(-8deg) scale(.9);
}
/* Far layer */
.bg-antibodies .a1{top:10%;left:20%;width:min(18vw,300px);transform:rotate(-15deg) scale(.9)}
.bg-antibodies .a2{top:18%;right:45%;width:min(17vw,230px);transform:rotate(14deg) scale(.9)}
.bg-antibodies .a3{bottom:14%;left:20%;width:min(19vw,250px);transform:rotate(9deg) scale(.92)}
.bg-antibodies .a4{bottom:6%;right:48%;width:min(10vw,240px);transform:rotate(-5deg) scale(.9)}
/* Near layer */
.bg-antibodies .n1,.bg-antibodies .n2,.bg-antibodies .n3,.bg-antibodies .n4,.bg-antibodies .n5{
  opacity:.5;
  filter:blur(3px);
}
.bg-antibodies .n1{top:35%;right:50%;width:min(15vw,220px);transform:rotate(-10deg) scale(.92)}
.bg-antibodies .n2{top:30%;right:60%;width:min(14vw,210px);transform:rotate(12deg) scale(.90)}
.bg-antibodies .n3{bottom:20%;right:40%;width:min(5vw,220px);transform:rotate(-4deg) scale(.92)}
.bg-antibodies .n4{bottom:50%;right:30%;width:min(13vw,200px);transform:rotate(8deg) scale(.90)}
.bg-antibodies .n5{top:48%;right:20%;width:min(5vw,190px);transform:rotate(-16deg) scale(.88)}


/* =========================================================
   BUTTONS
========================================================= */
.btn{
  display:inline-block;padding:12px 18px;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;text-decoration:none;font-weight:700;border:0;cursor:pointer;transition:transform .08s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-outline:hover{background:rgba(255,255,255,.06)}
.btn-sm{padding:8px 12px;font-size:14px}

/* =========================================================
   GRIDS / CARDS / TEAM
========================================================= */
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
.card-img{width:100%;border-radius:var(--radius);background:var(--card);border:1px solid var(--border)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px}

.team{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:700px){.team{grid-template-columns:1fr}}
.member{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;text-align:center;
}
.member h4{margin:6px 0 2px;font-size:18px;text-align:left}
.member p{color:var(--muted);margin:0;font-size:16px}
.member p.role{text-align:left}
.member p.bio-text{text-align:left;margin-top:10px;line-height:1.6}
.member img.portrait{
  width:200px;height:200px;display:block;margin:12px auto;
  object-fit:cover;object-position:50% 50%;border-radius:12px;
}

/* =========================================================
   CONTACT (INFO PANEL + FORM)
========================================================= */
.contact-wrap{display:grid;grid-template-columns:360px 1fr;gap:28px;align-items:start}
.contact-info{
  position:sticky;top:90px;display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:28px 22px;border:1px solid var(--border);border-radius:var(--radius);
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02)),
    radial-gradient(120% 120% at 0% 0%,rgba(99,154,255,.10),transparent 60%),
    radial-gradient(120% 120% at 100% 100%,rgba(255,99,179,.08),transparent 60%);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.info-logo,.contact-logo{
  width:clamp(140px,22vw,240px);max-width:90%;height:auto;display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.contact-name{margin:6px 0 2px;text-align:center;font-size:clamp(20px,3.4vw,30px);line-height:1.15}
.contact-address{margin:6px 0 0;text-align:center;font-style:normal;color:var(--muted);line-height:1.55}
.contact-lines{margin:4px 0 0;text-align:center}
.contact-lines a{color:var(--text);text-decoration:none;border-bottom:1px dashed var(--border)}
.contact-lines a:hover{border-bottom-color:rgba(255,255,255,.25)}

.contact-card{
  background:radial-gradient(120% 120% at 0% 0%,rgba(255,255,255,.03),rgba(255,255,255,.01) 60%),var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);padding:24px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);backdrop-filter:blur(6px);
}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1 / -1}
.contact-card label{font-size:14px;color:var(--muted)}
.contact-card input,
.contact-card textarea,
.contact-card select{
  appearance:none;border:1px solid var(--border);background:#cfe3f540;color:var(--text);
  border-radius:10px;padding:12px 14px;font:inherit;outline:none;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.contact-card input:focus,
.contact-card textarea:focus,
.contact-card select:focus{
  border-color:#79c3ff;box-shadow:0 0 0 3px rgba(121,195,255,.22);background:#cfe3f560;
}
.contact-card ::placeholder{color:#b9c5d8}
.contact-submit{width:100%;margin-top:6px}

/* Align “Get in touch” with the form */
#contact-title{margin-left:calc(360px + 28px)}

/* =========================================================
   NEWS / EVENTS
========================================================= */
/* Constrain to page width */
#events{display:grid;justify-items:center}
#events > *{width:var(--page-w)}

/* List grid */
#events .news-list{display:grid;grid-template-columns:1fr;gap:16px;width:100%}

/* Card wrapper (article/details/link) */
#events .news-list > article,
#events .news-list > details,
#events .news-list > a.news-card{
  display:block;width:100%;border-radius:16px;margin-inline:0;
}
#events .news-list > * .news-card{border-radius:16px}

/* Card base */
.news-item{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:16px 18px;margin:0;box-shadow:0 8px 28px rgba(0,0,0,.25);
}

/* Thumbnail layout */
.news-item.thumb .news-card{
  display:grid;grid-template-columns:112px 1fr auto;gap:14px;align-items:center;padding:14px 16px;
  background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:14px 14px 0 0;
}
.news-item.thumb{border-radius:14px;overflow:hidden}
.news-item.thumb .news-body{
  border:1px solid var(--border);border-top:none;border-radius:0 0 14px 14px;
  padding:16px;background:rgba(255,255,255,.02);
}
.news-thumb{
  width:112px;height:80px;object-fit:cover;object-position:50% 50%;
  border-radius:10px;border:1px solid var(--border);
}
.news-meta .date{display:block;color:var(--muted);font-size:14px;margin-bottom:6px}
.news-item.thumb .news-card:hover,
.news-item.thumb .news-card:focus-within{background:rgba(255,255,255,.03)}

/* Toggle */
.news-toggle{
  appearance:none;border:0;background:transparent;color:var(--text);
  font-size:20px;line-height:1;padding:6px;border-radius:8px;cursor:pointer;
}
.news-toggle .chev{display:inline-block;transition:transform .2s ease}

/* Mobile: stack thumbnail above */
@media (max-width:640px){
  .news-item.thumb .news-card{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "thumb thumb"
      "meta  chevron";
  }
  .news-thumb{grid-area:thumb;width:100%;height:180px;border-radius:12px}
}

/* Optional overrides (hide thumb & CTA) */
#events .news-thumb{display:none !important}
#events .news-item .news-card{grid-template-columns:1fr auto !important}
#events .news-body .btn{display:none !important}

/* Event text colors */
#events .news-body{color:#e7e9ec}
#events .news-meta .date{color:#88aec2}
#events .news-title{color:#f5f8f9}
#events .news-body a{color:#6fc0ff;text-decoration:none}
#events .news-body a:hover{text-decoration:underline}

/* Per-paragraph coloring inside the details panel */
#events .news-body p:first-of-type{color:#6fc0ff}  /* first paragraph = white */
#events .news-body p:nth-of-type(2){color:#6fc0ff} /* second paragraph = light blue */
#events .news-body p:nth-of-type(2) a{color:#6fc0ff}
#events .news-body p:nth-of-type(2) a:hover{text-decoration:underline}

/* =========================================================
   FOOTER
========================================================= */
.site-footer{
  border-top:1px solid var(--border);padding:28px 0;
  color:var(--muted);text-align:center;
}

/* =========================================================
   FLOATING “SOUP”
========================================================= */
.soup{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.soup .ab{
  --size:140px;--x:50%;--y:50%;--drift-x:28px;--drift-y:38px;--dur:22s;--delay:0s;
  position:absolute;left:0;top:0;width:var(--size);height:auto;
  transform:translate(var(--x),var(--y));opacity:.14;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));
  animation:soup-drift var(--dur) ease-in-out var(--delay) infinite;
}
@keyframes soup-drift{
  0%{transform:translate(var(--x),var(--y)) rotate(0)}
  25%{transform:translate(calc(var(--x)+var(--drift-x)),calc(var(--y)-var(--drift-y))) rotate(6deg)}
  50%{transform:translate(var(--x),calc(var(--y) - (var(--drift-y)*1.6))) rotate(0)}
  75%{transform:translate(calc(var(--x)-var(--drift-x)),calc(var(--y)-var(--drift-y))) rotate(-5deg)}
  100%{transform:translate(var(--x),var(--y)) rotate(0)}
}
.soup .ab:nth-child(1){--x:6%; --y:12%; --size:120px; --dur:24s}
.soup .ab:nth-child(2){--x:78%;--y:18%; --size:140px; --dur:28s; --delay:2s}
.soup .ab:nth-child(3){--x:18%; --y:42%; --size:110px; --dur:26s; --delay:1s}
.soup .ab:nth-child(4){--x:60%; --y:38%; --size:150px; --dur:30s; --delay:3s}
.soup .ab:nth-child(5){--x:84%; --y:62%; --size:130px; --dur:25s; --delay:.5s}
.soup .ab:nth-child(6){--x:12%; --y:72%; --size:100px; --dur:27s; --delay:2.6s}
.soup .ab:nth-child(7){--x:42%; --y:80%; --size:160px; --dur:29s; --delay:1.8s}
.soup .ab:nth-child(8){--x:68%; --y:74%; --size:120px; --dur:23s; --delay:.9s}
@media (prefers-reduced-motion:reduce){.soup .ab{animation:none!important}}

/* =========================================================
   UTILITIES
========================================================= */
.reveal{opacity:0;transform:translateY(10px);transition:.5s ease}
.reveal.visible{opacity:1;transform:none}
.centerstage{display:grid;place-items:center;padding:40px 0}
.centerpiece{
  display:block;margin:0 auto;width:min(90vw,900px);height:auto;object-fit:contain;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.45));
  animation:floatY var(--float-dur) ease-in-out infinite;will-change:transform;
}
@keyframes floatY{
  0%{transform:translate3d(0,0,0) rotate(0)}
  25%{transform:translate3d(6px,calc(var(--float-y)*-0.5),0) rotate(calc(var(--float-rot)*.4))}
  50%{transform:translate3d(0,calc(var(--float-y)*-1),0) rotate(var(--float-rot))}
  75%{transform:translate3d(-6px,calc(var(--float-y)*-0.5),0) rotate(calc(var(--float-rot)*.6))}
  100%{transform:translate3d(0,0,0) rotate(0)}
}
.centerpiece:hover{animation-duration:3.8s;--float-y:34px;--float-rot:1.8deg}
.orbit-stage{display:none!important}
.molecule{animation:none!important}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.centerpiece{animation:none}
    
}

/* =========================================================
   RESPONSIVE
========================================================= */
/* Mobile & small screens (phones + small tablets) */
@media (max-width:980px){

  :root{
    --page-w: 100vw;
  }

  body{
    background-attachment: scroll;
    background-size: cover;
  }

  .container{
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 16px;
  }

  #events > *{
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
  }

  .grid-2{grid-template-columns:1fr;}
  .cards{grid-template-columns:1fr;}

  /* NAV: make it fit on small screens */
  .nav{
    flex-wrap: wrap;        /* ✅ allows logo + nav to go onto 2 lines */
    gap: 8px;               /* a bit tighter spacing */
  }

  .site-header .logo img,
  img.logo-img{
    height: 80px;           /* ✅ smaller logo on phones */
  }

  .site-header .nav nav{
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;        /* ✅ allows the links to wrap instead of being cut off */
    gap: 12px;
  }

  .site-header .nav nav a{
    font-size: 14px;        /* ✅ slightly smaller nav text */
  }

  /* ===== HERO ===== */
  .hero{
    padding: 40px 0 24px;
  }

  .hero .hero-inner{
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0;
    display: flex;
    flex-direction: column;     /* text above image */
    align-items: center;
    text-align: center;
    gap: 24px;
  }

  .hero-text,
  .hero-image{
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .hero-headline{
    font-size: clamp(24px, 5vw, 28px);
  }

  .hero-image{
    justify-content: center;
    position: relative;
    transform: none;            /* no sideways nudge on phones */
  }

  .hero-img{
    width: 100%;
  }

  .hero-label{
    right: 12px;
    bottom: 8px;
    padding: 4px 20px;
    font-size: 24px;      /* size of "DegrAb" */
  }

  /* Make the TM next to DegrAb bigger */
  .hero-label .tm{
    font-size: 0.8em;       /* same height as "DegrAb" text */
    margin-left: 4px;     /* small space between DegrAb and TM */
    vertical-align: text-top;
    font-weight: 800;
  }


  /* Sections below hero */
  .section h2{
    text-align: center;
  }

  .section p{
    text-align: left;
  }

  /* CONTACT: stack logo and form nicely on small screens */
  .contact-wrap{
    grid-template-columns:1fr;
  }

  .contact-info{
    position:static;
  }

  .contact-grid{
    grid-template-columns:1fr;
  }

  #contact-title{
    margin-left:0;
    text-align:center;
  }

  /* EVENTS: cards full-width on mobile */
  #events .news-list{
    width: 100% !important;
    padding: 0 0 24px;
  }

  #events .news-item{
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 16px 0;
  }

  #events .news-body,
  #events .news-card{
    padding-left: 16px;
    padding-right: 16px;
  }
} /* end @media (max-width:980px) */

/* =========================================================
   ABOUT TYPOGRAPHY
========================================================= */
section#about h2{
  font-size:clamp(46px,6vw,70px);
  letter-spacing:.6px;
}
section#about p{
  font-size:clamp(22px,2.8vw,30px);
  line-height:1.8;
  max-width:90ch;
}
/* Events: normalize children so each card looks the same */
#events .news-list > .news-item {
  margin: 0;               /* no extra gaps */
  border-radius: 14px;     /* same rounded corners */
}

/* Prevent accidental nested card visuals */
#events .news-list .news-item .news-item {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
}
/* Hide DegrAb label everywhere */
#degrab-label,
.hero-label{
  display: none !important;
}