/* ==========================================================================
   MVP overrides — small additions on top of ../css/styles.css for photo
   avatars, which the full site's team page doesn't need (it uses initials
   only). Nothing here redefines the base design system.
   ========================================================================== */

/* the full wordmark reads "Selene Nanorobotics" but is illegible at the
   main site's nav size — bump it up so the name is actually visible */
.brand-chip img{height:49px;}
.footer-brand .brand-chip img{height:46px;}

/* on a real desktop display the whole site reads a size too small (the
   base body copy is 15px) — matches what a couple of cmd-+ browser-zoom
   steps look like, so reproduce that directly with CSS zoom rather than
   re-tuning every font-size/spacing value individually. Scoped to wide
   viewports only; small screens already size for their own breakpoints */
@media (min-width:1000px){
  html{zoom:1.15;}
}

.avatar{
  width:64px;height:64px;
  overflow:hidden;
}
.avatar img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}
/* LinkedIn's "#OpenToWork" ring is baked into the source photo — zoom past it */
.avatar-crop img{transform:scale(1.34);}

/* each "super section" of the homepage (mission, scientific foundation,
   recognition, talk to us — the hero already does this natively via
   .hero) fills at least a full viewport, same nav-clearance padding .hero
   uses, so scrolling reads as one section per screen rather than a
   continuous dense scroll. Content taller than 100vh still grows normally;
   this is a floor, not a clip. */
.section-full{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  padding-top:calc(var(--nav-h) + 40px);
  padding-bottom:70px;
}

/* scroll-behavior:smooth here is only for #contact-style anchor jumps —
   there is no scroll-snap on this page */
html{
  scroll-padding-top:var(--nav-h);
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}

/* about section reads as a continuation of the hero, not a new "spec sheet"
   section — the dot-grid is the same texture already used on .page-hero
   elsewhere on the site, just centered instead of corner-masked to suit
   the now-centered copy */
.about-lead{
  position:relative;
  overflow:hidden;
}
.about-lead::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(127,169,175,.14) 1px, transparent 0);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse 70% 65% at 50% 35%, black 10%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 35%, black 10%, transparent 75%);
}
.mission-glow-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  z-index:0;
  pointer-events:none;
}
.about-lead .container{position:relative;z-index:1;}

.about-copy{
  max-width:640px;
  margin:0 auto;
  text-align:center;
}
.about-copy p{color:var(--text-muted);font-size:16.5px;line-height:1.75;}
.about-copy .about-lede{color:var(--text);font-size:18px;line-height:1.6;margin-bottom:20px;}

/* key facts get pulled out of the muted body copy — a bright bold word for
   names/institutions, a cyan one for the headline numbers */
.about-copy strong,
.science-copy strong,
.ip-copy strong{color:var(--text);font-weight:600;}
.about-copy .stat,
.science-copy .stat{color:var(--cyan);font-weight:600;}

/* how it works + scientific foundation: no border-bottom on the former,
   no border-top on the latter — the two .section-alt sections already
   share one background, so dropping the seam between them lets them
   read as one long section instead of two short ones back to back.
   Just one glow now, top-left of how-it-works — the second blob that
   used to straddle the boundary into scientific foundation was cut,
   so there's no glow right at the seam itself. */
.how-it-works{position:relative;overflow:hidden;border-bottom:none;}
.how-it-works::before{
  content:'';
  position:absolute;
  width:620px;height:620px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(63,224,232,.10) 0%, rgba(63,224,232,0) 70%);
  pointer-events:none;
  top:-120px;left:-140px;
}

/* six platform-design cards, three-up on desktop, stepping down to two
   then one column as the viewport narrows. Each card carries an icon set
   inside a glowing badge rather than a bare small stroke icon, so the
   grid reads as six distinct, lit-up modules instead of six identical
   text boxes. Hover lifts and brightens the border, echoing the
   Recognition cards' interaction */
.hiw-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.hiw-card{
  position:relative;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:32px 28px;
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.hiw-card:hover{
  transform:translateY(-4px);
  border-color:var(--cyan-dim);
  box-shadow:0 24px 50px -22px rgba(0,0,0,.6), 0 0 36px -12px rgba(63,224,232,.22);
}
.hiw-icon-badge{
  position:relative;
  width:64px;height:64px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle, rgba(63,224,232,.16) 0%, rgba(63,224,232,0) 72%);
  border:1px solid var(--cyan-dim);
  margin-bottom:20px;
}
/* the deck's source icons carry finer linework than the stroke icons
   these badges were sized for (double-ring crossed-out instruments,
   overlapping coin circles) — needs to render bigger than the old 24px
   stroke icons or the detail aliases into mush at small sizes */
.hiw-icon{height:38px;width:auto;max-width:42px;object-fit:contain;display:block;}
.hiw-card h3{position:relative;font-family:var(--font-display);font-size:17px;font-weight:600;margin-bottom:10px;}
.hiw-card p{position:relative;color:var(--text-muted);font-size:14px;line-height:1.65;}
@media (max-width:900px){.hiw-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.hiw-grid{grid-template-columns:1fr;}}

/* scientific foundation: text-left / rotatable-nanorobot-right, mirroring the
   two-column rhythm the site already uses elsewhere. section-alt gives it a
   faint background break from the mission section above (via How it works,
   directly before it — border-top:none here drops the seam between the
   two so they read as one continuous block). .section-full owns the
   section's vertical padding now (see above) */
.science-section{border-top:none;}
.science-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:64px;
  max-width:1020px;
  margin:0 auto;
}
.science-copy h2{margin-bottom:18px;}
.science-copy p{color:var(--text-muted);font-size:16.5px;line-height:1.75;margin-bottom:28px;}
.science-copy .btn svg{width:16px;height:16px;}

.science-visual{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--radius-l);
  background:radial-gradient(circle at 50% 50%, rgba(63,224,232,.1), transparent 68%);
  overflow:hidden;
}
.science-visual canvas{
  width:100%;height:100%;
  display:block;
  cursor:grab;
  touch-action:none;
}
.science-visual canvas:active{cursor:grabbing;}

/* leader lines: thin, low-opacity connectors from the fixed legend panel
   to the live 3D point they describe — the JS only ever sets x1/y1/x2/y2
   and an opacity (for the facing-away fade); everything else is here */
.science-leaders{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:1;
}
.science-leader{
  stroke-width:1;
  opacity:0;
  transition:opacity .2s ease;
}
.science-leader--shell{stroke:var(--cyan);stroke-opacity:.5;}
.science-leader--np{stroke:#8fd9df;stroke-opacity:.5;}
.science-leader-end{
  opacity:0;
  transition:opacity .2s ease;
}
.science-leader-end--shell{fill:var(--cyan);}
.science-leader-end--np{fill:#8fd9df;}

/* legend: a small fixed reference panel, not floating tags stuck to the
   model — same quiet caption language as the rest of the page (muted
   body copy, no mono/uppercase eyebrow treatment) */
.science-legend{
  position:absolute;
  top:18px;left:18px;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:9px;
  z-index:2;
}
.science-legend-row{
  display:flex;
  align-items:baseline;
  gap:8px;
}
.science-legend-row dt{margin:0;}
.science-legend-row dd{
  margin:0;
  font-family:var(--font-body);
  font-size:12.5px;
  color:var(--text-muted);
}
.science-legend-swatch{
  display:inline-block;
  width:7px;height:7px;
  border-radius:50%;
  transform:translateY(-1px);
}
.science-legend-swatch--shell{background:var(--cyan);}
.science-legend-swatch--np{background:#8fd9df;}

.science-hint{
  position:absolute;
  bottom:16px;left:50%;
  transform:translateX(-50%);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted);
  pointer-events:none;
}
@media (max-width:760px){
  .science-grid{grid-template-columns:1fr;gap:40px;}
  .science-copy{text-align:center;}
  .science-copy .btn{margin:0 auto;}
  .science-visual{max-width:360px;margin:0 auto;}
}

/* IP position: folded into the scientific foundation section as a small,
   quieter footnote block rather than a page of its own — h3 (not h2) since
   it's a supporting fact within this section, not a section title itself */
.ip-copy{
  max-width:520px;
  margin:56px auto 0;
  padding-top:32px;
  border-top:1px solid var(--line);
  text-align:center;
}
.ip-copy h3{margin-bottom:10px;font-size:16px;color:var(--text-muted);font-weight:600;}
.ip-copy p{color:var(--text-muted);font-size:14.5px;line-height:1.65;}

/* technology & IP: two of the four "current development" facts — the ones
   that stand on their own as public-facing trust signals (a citable result,
   a real IP position). Milestone dates and in-progress regulatory strategy
   read as pitch-deck detail, not site copy, so they stay out */
.dev-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  max-width:900px;
  margin:0 auto;
}
@media (max-width:700px){
  .dev-grid{grid-template-columns:1fr;}
}

/* Recognition: a proper section heading (not baked into the one card we
   have today), so future acceptances/awards can stack underneath it as
   their own cards without repeating the section title. Deliberately NOT
   .section-full — with a single card today, forcing a full viewport read
   as padded-out empty space rather than momentum; revisit once there's
   enough here to fill the screen on its own */
.recognition-grid{
  display:flex;
  flex-direction:column;
  gap:24px;
  max-width:900px;
  margin:0 auto;
}
.recognition .section-head h2{font-size:clamp(34px,4vw,52px);}

/* logo + copy, framed as one card (same panel-ratio as .contact-wrap); the
   whole card is now the link (see index.html), so it needs its own
   hover/focus treatment instead of relying on the nested text link */
.cls-card{
  display:grid;
  grid-template-columns:.62fr 1.38fr;
  background:var(--surface);
  border-radius:var(--radius-l);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.6);
  transition:box-shadow .3s ease, transform .3s ease;
}
.cls-card:hover{
  transform:translateY(-2px);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.65), 0 0 40px -8px rgba(63,224,232,.18);
}
.cls-media{
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
}
.cls-media img{width:100%;max-width:185px;height:auto;display:block;}
.cls-copy{padding:52px 48px;align-self:center;}
.cls-copy h3{font-family:var(--font-serif);font-weight:500;font-size:21px;margin-bottom:14px;}
.cls-copy p{color:var(--text-muted);font-size:16px;line-height:1.7;}
.cls-link-text{color:var(--cyan);border-bottom:1px solid var(--cyan-dim);}
.cls-card:hover .cls-link-text{border-bottom-color:var(--cyan);}
@media (max-width:760px){
  .cls-card{grid-template-columns:1fr;}
  .cls-media{padding:36px;}
  .cls-copy{padding:36px;}
}

/* traction: two big stat callouts, then the development ecosystem logo
   wall, folded directly into the Recognition section (no heading of its
   own) so it reads as evidence stacked under the same "Recognition"
   banner rather than a separate block — margin-top keeps it close to
   the cards above instead of the usual full section gap */
.traction-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  max-width:820px;
  margin:40px auto 48px;
}
.traction-stat{text-align:center;}
.traction-num{
  display:block;
  font-family:var(--font-serif);
  font-size:clamp(40px,5vw,56px);
  color:var(--cyan);
  line-height:1;
  margin-bottom:14px;
}
.traction-stat p{color:var(--text-muted);font-size:15px;line-height:1.6;max-width:320px;margin:0 auto;}
.traction-highlight{color:var(--cyan);}
@media (max-width:640px){
  .traction-stats{grid-template-columns:1fr;gap:36px;}
}

/* development ecosystem: no card, no box at all — every logo rendered
   in a single flat off-white via filter (brightness(0) then invert(1)
   flattens any color/darkness to a clean light silhouette while keeping
   the source PNG/SVG's own transparency, so it just sits directly on
   the section's dark background, the standard "as seen in" wall
   treatment for a dark theme, kept uniformly monochrome across every
   logo). Sits directly under the traction stats as the "supported by"
   strip, so it carries the same divider the old partner memos used. */
.ecosystem-grid{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:32px 44px;
  max-width:920px;
  margin:0 auto;
  padding-top:40px;
  border-top:1px solid var(--line);
}
.eco-tile img{
  height:30px;
  width:auto;
  max-width:130px;
  object-fit:contain;
  display:block;
  filter:brightness(0) invert(1);
  opacity:.75;
  transition:opacity .2s ease;
}
.eco-tile:hover img{opacity:1;}
.eco-tile:nth-child(4n) img{height:38px;max-width:150px;}
.eco-tile--badge img{height:46px;max-width:150px;}
.eco-tile--flat img{filter:none;opacity:1;}
@media (max-width:600px){
  .ecosystem-grid{gap:24px 30px;}
  .eco-tile img{height:22px;max-width:96px;}
  .eco-tile:nth-child(4n) img{height:28px;max-width:112px;}
  .eco-tile--badge img{height:34px;max-width:112px;}
}

/* team page hero: swimming-nanorobot canvas, scoped to just this section
   (.page-hero already has position:relative + overflow:hidden) */
.team-hero-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  z-index:0;
}
.team-hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(100deg, var(--void) 0%, rgba(5,8,10,.82) 28%, rgba(5,8,10,.4) 50%, transparent 78%);
  z-index:1;
  pointer-events:none;
}
@media (max-width:700px){
  .team-hero-scrim{background:linear-gradient(180deg, rgba(5,8,10,.35) 0%, rgba(5,8,10,.75) 65%, var(--void) 100%);}
}

/* careers page has nothing below the fold — center it as one deliberate
   screen instead of a page-hero banner trailing off into empty space.
   min-height:100dvh (dynamic viewport height) after the 100vh fallback,
   same pattern as .section-full below — 100vh on mobile is defined as the
   viewport with browser chrome fully collapsed, so the page is taller
   than what's actually visible on load and reflows (shifting everything
   centered in it, including the button) as the address bar collapses on
   the first scroll; dvh tracks the real visible height continuously so
   there's nothing to reflow. padding-top clears the fixed nav, matched by
   an equal padding-bottom so flex centering still lands on the viewport's
   true center instead of being pushed down by the lopsided padding. */
.empty-page{
  position:relative;
  overflow:hidden;
  min-height:100vh;
  min-height:100dvh;
  padding-top:var(--nav-h);
  padding-bottom:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:center;
}
.careers-hero-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  z-index:0;
}
.empty-page .container{position:relative;z-index:2;}
.empty-state{
  text-align:center;
  max-width:460px;
  margin:0 auto;
}
.empty-state h1{margin-bottom:18px;}
.empty-state p{
  color:var(--text-muted);
  font-size:16.5px;
  line-height:1.6;
  margin-bottom:30px;
}

/* internship program intro: centered lede + CTA before the Summer 2026 roster */
.intern-cta{text-align:center;margin-bottom:64px;}

/* a quick cyan ripple where a swimming nanorobot rams the button */
.btn.robot-hit{animation:robotHit .3s ease-out;}
@keyframes robotHit{
  0%{box-shadow:0 0 0 0 rgba(63,224,232,.65);}
  45%{box-shadow:0 0 0 12px rgba(63,224,232,0);}
  100%{box-shadow:0 0 0 0 rgba(63,224,232,0);}
}