@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,600&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root{
  --bg:#0D1B2A;
  --bg-soft:#12223A;
  --surface:#152742;
  --surface-2:#1A2F4E;
  --surface-3:#1F3658;
  --text:rgba(248,243,232,.92);
  --text-2:rgba(248,243,232,.72);
  --muted:rgba(248,243,232,.42);
  --line:rgba(198,172,108,.08);
  --line-strong:rgba(198,172,108,.14);
  --accent:#FBE196;
  --accent-2:#FBE196;
  --accent-3:#FBE196;
  --accent-glow:rgba(251,225,150,.28);
  --gold-glow:rgba(251,225,150,.22);
  --shadow-xl:0 34px 90px rgba(6,10,18,.55);
  --shadow-lg:0 22px 54px rgba(6,10,18,.42);
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Manrope", system-ui, sans-serif;
  --mono:"JetBrains Mono", monospace;
  /* remap light-theme variables for dark background */
  --ink:rgba(248,243,232,.92);
  --ink-2:rgba(248,243,232,.72);
  --bone:#0D1B2A;
  --bone-2:#12223A;
}

html{background:var(--bg)!important;}
body{
  background:
    radial-gradient(circle at 20% 18%, rgba(251,225,150,.06), transparent 32%),
    radial-gradient(circle at 80% 10%, rgba(251,225,150,.04), transparent 28%),
    radial-gradient(circle at 50% 75%, rgba(13,27,42,.6), transparent 40%),
    linear-gradient(180deg, #0D1B2A 0%, #0F1E2E 50%, #0D1B2A 100%) !important;
  color:var(--text)!important;
  font-family:var(--sans)!important;
}
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-4;
}
body::before{
  background:
    radial-gradient(circle at 15% 20%, rgba(251,225,150,.05), transparent 22%),
    radial-gradient(circle at 80% 15%, rgba(251,225,150,.04), transparent 24%),
    radial-gradient(circle at 45% 85%, rgba(251,225,150,.03), transparent 26%);
  filter:blur(36px);
}
body::after{
  background:linear-gradient(180deg, rgba(248,240,218,.012), transparent 16%, transparent 84%, rgba(248,240,218,.008));
}

a{color:inherit;}
img{image-rendering:auto;}

#ambient{
  background:radial-gradient(circle at 50% 18%, rgba(16,27,56,.50), rgba(4,7,15,.96) 72%)!important;
}
.bg{
  mix-blend-mode:screen!important;
  filter:saturate(1.1) brightness(.58) blur(8px)!important;
  transform:scale(1.06)!important;
}
.bg.on{opacity:.20!important; transform:scale(1.01)!important;}
.vignette{
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255,255,255,.02), transparent 28%),
    radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.22) 78%, rgba(0,0,0,.52) 100%)!important;
}
.grain{display:none!important;}

.topbar{
  background:rgba(13,27,42,.62)!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.26)!important;
  backdrop-filter:blur(26px) saturate(1.24)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.24)!important;
}
.brand,
.brand em,
.foot .wordmark,
.foot .wordmark em{
  font-family:var(--serif)!important;
  color:#fff!important;
}
.brand{font-size:1.14rem!important; letter-spacing:.01em!important;}
.brand .dot{
  background:var(--accent)!important;
  box-shadow:0 0 0 6px rgba(251,225,150,.12), 0 0 22px rgba(251,225,150,.35)!important;
}
.nav a{
  color:rgba(255,255,255,.72)!important;
  border:1px solid transparent!important;
}
.nav a:hover{
  color:#fff!important;
  background:rgba(251,225,150,.08)!important;
  border-color:rgba(251,225,150,.16)!important;
}
.nav a[aria-current="page"]{
  color:#fff!important;
  background:linear-gradient(135deg, rgba(251,225,150,.18), rgba(251,225,150,.10))!important;
  border-color:rgba(251,225,150,.22)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 0 18px rgba(251,225,150,.10)!important;
}
.meta-right,
.colophon,
.foot p,
.foot .addr,
.addr-block p,
.legal .small,
.t-year,
.apply-step .num,
.contact-card .mono,
.addr-block .mono,
.pos-card .mono,
.fig-card .mono,
.ed-item .year,
.ed-item .tag,
.ed-filters .chip,
.eyebrow,
.mono,
.atlas-step .num,
.atlas-step .meta-list dt,
.figure .fig-caption .sm,
.hud-top .sm,
.channel-label .sm,
.scale-bar span,
.t-item .mono,
.status{
  color:var(--muted)!important;
  font-family:var(--mono)!important;
}
.meta-right .live::before{background:var(--accent)!important; box-shadow:0 0 14px rgba(251,225,150,.32)!important;}
.progress>span{
  background:linear-gradient(90deg, var(--accent), #dcc88c, var(--accent-2))!important;
  box-shadow:0 0 18px rgba(251,225,150,.45)!important;
}

.eyebrow::before,
.apply-step .num::before,
.fig-card .mono::before,
.atlas-step .num::before{
  background:linear-gradient(90deg, rgba(251,225,150,.85), rgba(251,225,150,.45))!important;
  opacity:1!important;
}

/* All section eyebrows pick up the site accent gold so § THE THESIS,
   § PEOPLE, § DATENSCHUTZ etc. read in the same #FBE196 as the
   footer h4 and hero titles. The decorative ::before line above is
   already gold; this just brings the text in tone. */
.eyebrow{
  color:#FBE196!important;
}

h1.display,
h2.display,
h3.subhead,
.card h3,
.fig-card h3,
.pos-card h3,
.apply-step h3,
.t-text,
.atlas-step h3,
.contact-card h3,
.legal h3,
.hero h1,
.page-hero h1{
  font-family:var(--serif)!important;
  color:#fff!important;
  font-weight:400!important;
  letter-spacing:-.03em!important;
}
h1.display em,
h2.display em,
h3.subhead em,
.fig-card h3 em,
.pos-card h3 em,
.apply-step h3 em,
.atlas-step h3 em,
.page-hero h1 em,
.hero h1 em{font-style:italic!important;}

/* Hero titles and hero eyebrows pick up the footer gold (--accent),
   matching the rest of the golden text on the site. Declared after
   the white/muted color rules above so it wins via source order. */
.page-hero h1,
.hero h1{
  color:#FBE196!important;
}
.page-hero h1 em,
.hero h1 em{
  color:#FBE196!important;
}
.page-hero .eyebrow,
.hero .eyebrow{
  color:#FBE196!important;
}

body,
.lede,
.sec-head .sec-lede,
.card p,
.fig-card p,
.pos-card p,
.apply-step p,
.contact-card p,
.legal p,
.ed-item p,
.ed-item .excerpt,
.atlas-step p,
.atlas-step .meta-list dd,
.sec p,
.page-hero .lede,
.foot ul a,
.foot ul,
.colophon,
.btn,
.ed-filters .chip,
.ed-item .tag,
.channel-label,
.hud-top,
.hud-bot,
.scale-bar,
.meta-right,
.nav a{
  font-family:var(--sans)!important;
}
.lede,
.sec-head .sec-lede,
.card p,
.fig-card p,
.pos-card p,
.apply-step p,
.contact-card p,
.legal p,
.page-hero .lede,
.atlas-step p,
.atlas-step .meta-list dd,
.foot p,
.foot ul a,
.addr-block p,
.channel-label,
.hud-top,
.hud-bot,
.ed-item,
.ed-item .tag,
.ed-item .year{
  color:var(--text-2)!important;
}
.lede{max-width:58ch!important;}
.sec-head .sec-lede{max-width:none!important;}
.page-hero{padding-top:162px!important;}
.sec-head{border-bottom:1px solid var(--line)!important;}
#why .sec-head{border-bottom:none!important; padding-bottom:0!important;}
@media (min-width:901px){
  .page-hero .eyebrow{
    justify-content:flex-start!important;
  }
  .page-hero .eyebrow::before{
    order:2!important;
    margin-right:0!important;
    margin-left:14px!important;
  }
}
.sec{position:relative;}
.sec::before{
  content:"";
  position:absolute;
  left:48px; right:48px; top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  pointer-events:none;
}
@media (max-width:1100px){ .sec::before{left:28px; right:28px;} }

.btn{
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  backdrop-filter:blur(12px) saturate(1.1)!important;
}
.btn.primary{
  background:linear-gradient(135deg, rgba(251,225,150,.92), rgba(220,200,140,.92))!important;
  color:#0D1B2A!important;
  border-color:rgba(251,225,150,.65)!important;
  box-shadow:0 10px 30px rgba(251,225,150,.26)!important;
}
.btn.primary:hover{box-shadow:0 16px 38px rgba(251,225,150,.30)!important;}
.btn.ghost{
  background:rgba(255,255,255,.03)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.10)!important;
}
.btn.ghost:hover{background:rgba(255,255,255,.06)!important; border-color:rgba(255,255,255,.18)!important;}

.card,
.contact-card,
.addr-block,
.legal,
.pos-card,
.apply-step,
.ed-item,
.viewer-frame,
.atlas-viewer,
.figure{
  border-color:var(--line)!important;
  background:linear-gradient(180deg, rgba(14,25,40,.78), rgba(10,22,36,.92))!important;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, var(--shadow-lg)!important;
}
.fig-card{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
}
.card,
.contact-card,
.addr-block,
.legal,
.pos-card,
.apply-step,
.figure,
.viewer-frame,
.atlas-viewer{
  border-radius:24px!important;
}
.ed-item{
  border-top:1px solid var(--line)!important;
  border-bottom:1px solid var(--line)!important;
  background:transparent!important;
}
.card:hover,
.contact-card:hover,
.pos-card:hover,
.apply-step:hover,
.viewer-frame:hover,
.figure:hover{
  border-color:rgba(251,225,150,.22)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 34px 90px rgba(0,0,0,.44), 0 0 0 1px rgba(251,225,150,.08)!important;
}
.fig-card,
.fig-card:hover{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  border-color:transparent!important;
}
.fig-card .figure,
.fig-card .figure.portrait,
.fig-card .figure.portrait.figure-reveal,
.fig-card .figure:hover,
.fig-card .figure.portrait:hover{
  border:none!important;
  border-bottom:none!important;
  background:#0D1B2A!important;
  isolation:isolate!important;
  position:relative!important;
  z-index:1!important;
  box-shadow:none!important;
  border-radius:16px!important;
  overflow:hidden!important;
}
.fig-card .figure.portrait .fig-inner{
  background-size:cover!important;
  background-position:center!important;
}
.fig-card .figure.portrait .fig-overlay{
  background:none!important;
}
.fig-card:hover .figure.portrait,
.fig-card:hover .figure.portrait:hover{
  box-shadow:0 8px 32px rgba(251,225,150,.2), 0 0 0 2px rgba(251,225,150,.18)!important;
}
.figure,
.viewer-frame,
.atlas-viewer{
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.04), transparent 32%),
    radial-gradient(circle at 18% 18%, rgba(251,225,150,.10), transparent 26%),
    radial-gradient(circle at 82% 14%, rgba(251,225,150,.08), transparent 26%),
    linear-gradient(180deg, rgba(16,28,46,.95), rgba(10,22,36,.98))!important;
}
.figure .fig-inner.microscopy,
.viewer-bg,
.atlas-viewer .viewer-bg{
  mix-blend-mode:screen!important;
  filter:saturate(1.04) brightness(.76) contrast(1)!important;
}
.figure .fig-label,
.figure .fig-caption,
.hud-top,
.hud-bot,
.atlas-viewer .hud-top,
.atlas-viewer .hud-bot{
  color:var(--text)!important;
}
.figure .fig-label{
  background:rgba(13,27,42,.78)!important;
  border-color:rgba(255,255,255,.10)!important;
  backdrop-filter:blur(12px)!important;
}
.figure .fig-caption{color:var(--text-2)!important;}
.figure .fig-overlay,
.viewer-frame::before,
.atlas-viewer::before{
  background:
    radial-gradient(ellipse at 50% 35%, transparent 38%, rgba(0,0,0,.24) 100%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 20%),
    radial-gradient(circle at 12% 16%, rgba(251,225,150,.09), transparent 22%),
    radial-gradient(circle at 82% 14%, rgba(251,225,150,.08), transparent 22%)!important;
}
.figure .fig-stack img,
.viewer-frame .layer.front,
.atlas-viewer .layer.front{
  filter:drop-shadow(0 24px 42px rgba(0,0,0,.40)) drop-shadow(0 0 20px rgba(255,255,255,.05))!important;
}
.viewer-frame .layer.back,
.atlas-viewer .layer.back{opacity:.30!important; filter:blur(24px) saturate(1.12)!important;}
.viewer-frame .layer.mid,
.atlas-viewer .layer.mid{opacity:.55!important; filter:blur(6px)!important;}

.crosshair::before,
.crosshair::after,
.atlas-viewer .crosshair::before,
.atlas-viewer .crosshair::after,
.scale-bar .bar,
.scale-bar .bar::before,
.scale-bar .bar::after,
.atlas-viewer .scale-bar .bar,
.atlas-viewer .scale-bar .bar::before,
.atlas-viewer .scale-bar .bar::after{
  background:rgba(255,255,255,.30)!important;
}
.crosshair,
.atlas-viewer .crosshair{opacity:.28!important;}
.channel-label,
.scale-bar,
.hud-top,
.hud-bot,
.atlas-viewer .channel-label,
.atlas-viewer .scale-bar,
.atlas-viewer .hud-top,
.atlas-viewer .hud-bot{color:var(--text)!important;}
.channel-label .sm,
.scale-bar span,
.hud-top .sm,
.atlas-viewer .channel-label .sm,
.atlas-viewer .scale-bar span,
.atlas-viewer .hud-top .left span:first-child,
.atlas-viewer .hud-top .right span:first-child{color:var(--muted)!important;}

.atlas-dots button,
#heroAtlasDots button{
  background:rgba(255,255,255,.10)!important;
  border-radius:999px!important;
  box-shadow:none!important;
}
.atlas-dots button.active,
#heroAtlasDots button.active{
  background:linear-gradient(90deg, var(--accent), var(--accent-2))!important;
  box-shadow:0 0 14px rgba(251,225,150,.25)!important;
}
.atlas-dots button:hover,
#heroAtlasDots button:hover{background:rgba(255,255,255,.22)!important;}
.atlas-step{opacity:.54!important;}
.atlas-step.active{opacity:1!important;}
.atlas-step .meta-list dt,
.atlas-step .meta-list dd{border-top-color:var(--line)!important;}

.ed-filters .chip,
.ed-item .tag{
  background:rgba(255,255,255,.03)!important;
  border-color:rgba(255,255,255,.10)!important;
  color:var(--text-2)!important;
}
.ed-filters .chip:hover{border-color:rgba(255,255,255,.22)!important; color:#fff!important;}
.ed-filters .chip.active{
  background:linear-gradient(135deg, rgba(251,225,150,.16), rgba(251,225,150,.10))!important;
  color:#fff!important;
  border-color:rgba(251,225,150,.24)!important;
  box-shadow:0 0 18px rgba(251,225,150,.12)!important;
}
.ed-item:hover{
  background:linear-gradient(90deg, rgba(251,225,150,.05), transparent 46%)!important;
}
.ed-item .year{color:var(--muted)!important;}
.ed-item .tag{white-space:nowrap;}

.timeline::before{background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent)!important;}
.t-item{border-color:var(--line)!important;}
.t-item::before{
  background:var(--accent)!important;
  box-shadow:0 0 0 8px rgba(251,225,150,.10), 0 0 18px rgba(251,225,150,.22)!important;
}

.foot,
.colophon{border-top-color:var(--line)!important;}
.foot ul a{color:var(--text-2)!important;}
.foot ul a:hover{color:#fff!important;}
.foot h4{color:var(--muted)!important; font-family:var(--mono)!important;}
.foot .addr strong{color:#fff!important;}

.split-fig,
.lead-figure .figure,
.figure.hero-fig,
.figure.wide-fig{border-radius:28px!important;}

/* better mobile chrome */
@media (max-width:1100px){
  .topbar{padding:0 20px!important;}
  .card,
  .fig-card,
  .contact-card,
  .addr-block,
  .legal,
  .pos-card,
  .apply-step,
  .figure,
  .viewer-frame,
  .atlas-viewer{border-radius:20px!important;}
}

/* =========================================================
   V4 PHOTO AMBIENCE — stronger background-photo treatment
   ========================================================= */

:root{
  --hero-photo:url('bg_merged.webp');
  --hero-glow:rgba(251,225,150,.18);
  --ambient-tint:rgba(251,225,150,.10);
}

body[data-page="index"]{
  --hero-photo:url('bg_merged.webp');
  --hero-glow:rgba(251,225,150,.16);
}
body[data-page="join"]{
  --hero-photo:url('bg_vwf.webp');
  --hero-glow:rgba(251,225,150,.18);
}
body[data-page="news"]{
  --hero-photo:url('bg_rfp.webp');
  --hero-glow:rgba(251,225,150,.18);
}
body[data-page="publications"]{
  --hero-photo:url('bg_actinin.webp');
  --hero-glow:rgba(251,225,150,.18);
}
body[data-page="research"]{
  --hero-photo:url('bg_actinin.webp');
  --hero-glow:rgba(251,225,150,.16);
}
body[data-page="team"]{
  --hero-photo:url('bg_nuclei.webp');
  --hero-glow:rgba(251,225,150,.18);
}
body[data-page="technology"]{
  --hero-photo:url('bg_vwf.webp');
  --hero-glow:rgba(251,225,150,.20);
}
body[data-page="translational"]{
  --hero-photo:url('bg_rfp.webp');
  --hero-glow:rgba(251,225,150,.18);
}

#ambient{
  position:fixed!important;
  inset:0!important;
  z-index:-5!important;
  overflow:hidden!important;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 14%, rgba(21,39,66,.4), rgba(13,27,42,.97) 72%)!important;
}
#ambient::before,
#ambient::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
#ambient::before{
  z-index:3;
  background:
    linear-gradient(180deg, rgba(13,27,42,.3) 0%, rgba(13,27,42,.55) 22%, rgba(13,27,42,.7) 100%),
    radial-gradient(circle at 16% 18%, rgba(251,225,150,.10), transparent 23%),
    radial-gradient(circle at 82% 14%, rgba(251,225,150,.09), transparent 22%),
    radial-gradient(circle at 50% 82%, rgba(251,225,150,.07), transparent 28%);
}
#ambient::after{
  z-index:2;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.03), transparent 26%),
    radial-gradient(circle at 50% 70%, var(--hero-glow), transparent 35%);
  filter:blur(20px);
  opacity:.9;
}
#ambient .bg{
  inset:-8%!important;
  opacity:0!important;
  transform:scale(1.12)!important;
  transition:opacity 1.35s cubic-bezier(.19,1,.22,1), transform 9.5s cubic-bezier(.19,1,.22,1), filter 1.35s cubic-bezier(.19,1,.22,1)!important;
  background-size:cover!important;
  background-position:center center!important;
  mix-blend-mode:screen!important;
  filter:saturate(1.06) brightness(.62) contrast(1.04) blur(0px)!important;
}
#ambient .bg.on{
  opacity:.46!important;
  transform:scale(1.02)!important;
}
#ambient .bg[data-bg="1"]{ filter:saturate(1.10) brightness(.60) contrast(1.08)!important; }
#ambient .bg[data-bg="2"]{ filter:saturate(1.08) brightness(.64) contrast(1.03)!important; }
#ambient .bg[data-bg="3"]{ filter:saturate(1.10) brightness(.58) contrast(1.08)!important; }
#ambient .bg[data-bg="4"]{ filter:saturate(1.12) brightness(.66) contrast(1.03)!important; }

.vignette{
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255,255,255,.025), transparent 28%),
    radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.28) 76%, rgba(0,0,0,.68) 100%)!important;
}
.grain{display:none!important;}

.page-hero,
.hero{
  position:relative;
  isolation:isolate;
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:72px 28px 0 28px;
  border-radius:34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 24%),
    radial-gradient(circle at 22% 20%, var(--hero-glow), transparent 24%),
    linear-gradient(180deg, rgba(4,7,15,.04), rgba(4,7,15,.18) 55%, rgba(4,7,15,.36) 100%),
    var(--hero-photo) center/cover no-repeat;
  mix-blend-mode:screen;
  opacity:1;
  filter:saturate(1.22) brightness(1.22) contrast(1.04);
  z-index:-2;
  box-shadow:0 24px 60px rgba(0,0,0,.14);
}
.page-hero::after{
  content:"";
  position:absolute;
  inset:72px 28px 0 28px;
  border-radius:34px;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(4,7,15,.68), rgba(4,7,15,.36) 55%, rgba(4,7,15,.08) 82%),
    linear-gradient(180deg, rgba(4,7,15,.32), rgba(4,7,15,.44) 34%, rgba(4,7,15,.30) 56%, rgba(4,7,15,.66) 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    inset 0 -90px 130px -30px rgba(4,7,15,.62),
    inset 0 60px 120px -40px rgba(4,7,15,.42),
    0 50px 110px -24px rgba(0,0,0,.72);
  z-index:-1;
}
.page-hero > *{position:relative; z-index:1;}
.page-hero h1,
.page-hero .lede,
.page-hero .eyebrow{
  text-shadow:0 2px 22px rgba(4,7,15,.75), 0 1px 3px rgba(4,7,15,.6);
}

.hero::before{
  content:"";
  position:absolute;
  inset:24px 18px 0 18px;
  border-radius:38px;
  background:
    radial-gradient(circle at 50% 20%, rgba(251,225,150,.12), transparent 28%),
    linear-gradient(180deg, rgba(4,7,15,.12), rgba(4,7,15,0) 34%, rgba(4,7,15,.20) 100%);
  pointer-events:none;
  z-index:-1;
}

.figure,
.viewer-frame,
.atlas-viewer{
  overflow:hidden!important;
}
.figure .fig-inner.microscopy,
.viewer-bg,
.atlas-viewer .viewer-bg{
  opacity:.56;
  mix-blend-mode:screen!important;
  filter:saturate(1.12) brightness(.88) contrast(1.04)!important;
}
.figure .fig-overlay,
.viewer-frame::before,
.atlas-viewer::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 20%),
    radial-gradient(circle at 18% 18%, rgba(251,225,150,.10), transparent 25%),
    radial-gradient(circle at 82% 14%, rgba(251,225,150,.10), transparent 24%),
    radial-gradient(ellipse at 50% 35%, transparent 34%, rgba(0,0,0,.32) 100%)!important;
}
.figure .fig-stack img,
.viewer-frame .layer.front,
.atlas-viewer .layer.front{
  filter:drop-shadow(0 28px 54px rgba(0,0,0,.48)) drop-shadow(0 0 22px rgba(255,255,255,.06))!important;
}
.figure .fig-label,
.hud-top,
.hud-bot,
.channel-label,
.scale-bar{
  text-shadow:0 2px 14px rgba(0,0,0,.24);
}

.topbar{
  background:rgba(13,27,42,.54)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 14px 36px rgba(0,0,0,.26)!important;
}

@media (max-width:900px){
  #ambient .bg.on{opacity:.38!important;}
  .page-hero::before,
  .page-hero::after{
    inset:92px 16px 0 16px;
    border-radius:26px;
  }
  .hero::before{inset:30px 10px 0 10px; border-radius:26px;}
}


/* === v6 photo-forward V4 features === */
:root{
  --panel-glow:rgba(251,225,150,.18);
  --panel-gold:rgba(233,193,117,.16);
}

.viewer-frame,
.atlas-viewer,
.split-fig,
.figure,
.fig-card,
.contact-card,
.pos-card,
.ed-item,
.legal{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transform-style:preserve-3d;
  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    box-shadow .45s cubic-bezier(.22,1,.36,1),
    border-color .35s ease,
    background .35s ease!important;
}
.viewer-frame::after,
.atlas-viewer::after,
.split-fig::after,
.figure::after,
.fig-card::after,
.contact-card::after,
.pos-card::after,
.ed-item::after,
.legal::after{
  content:"";
  position:absolute;
  inset:-24%;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.16), rgba(255,255,255,.05) 16%, transparent 42%),
    radial-gradient(380px circle at 20% 18%, rgba(251,225,150,.14), transparent 38%),
    radial-gradient(340px circle at 80% 12%, rgba(251,225,150,.12), transparent 34%);
  opacity:var(--glow,0);
  transition:opacity .25s ease;
  mix-blend-mode:screen;
}
.viewer-frame:hover,
.atlas-viewer:hover,
.split-fig:hover,
.figure:hover,
.fig-card:hover,
.contact-card:hover,
.pos-card:hover,
.ed-item:hover,
.legal:hover{
  border-color:rgba(124,236,213,.28)!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 22px 70px rgba(0,0,0,.42),
    0 0 48px rgba(251,225,150,.07)!important;
}

.viewer-frame,
.atlas-viewer{
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    linear-gradient(180deg, rgba(7,12,24,.96), rgba(4,7,15,.98))!important;
  border:1px solid rgba(255,255,255,.09)!important;
}
.viewer-frame::before,
.atlas-viewer::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(90deg, rgba(255,255,255,.02), transparent 18%, transparent 82%, rgba(255,255,255,.018)),
    repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px);
  opacity:.55;
  mix-blend-mode:screen;
}
.viewer-frame .channel-stage,
.atlas-viewer .channel-stage,
.fig-stack{
  z-index:3!important;
}
.viewer-bg{
  mix-blend-mode:screen!important;
  filter:saturate(1.18) brightness(.72) blur(18px)!important;
  opacity:0!important;
}
.viewer-bg.on{opacity:.34!important;}
.fig-inner.microscopy{
  background-size:cover!important;
  background-position:center!important;
  filter:saturate(1.08) contrast(1.04);
}
.fig-inner.microscopy::before,
.fig-stack::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(120deg, transparent 0 36%, rgba(255,255,255,.06) 48%, transparent 62%),
    radial-gradient(circle at 18% 24%, rgba(251,225,150,.14), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(251,225,150,.11), transparent 22%);
  mix-blend-mode:screen;
  will-change:transform;
  animation:v4Sweep 11s linear infinite;
}
@keyframes v4Sweep{
  0%{transform:translateX(-18%)}
  50%{transform:translateX(8%)}
  100%{transform:translateX(-18%)}
}
.fig-stack img,
.layer.front{
  filter:drop-shadow(0 34px 42px rgba(0,0,0,.55)) saturate(1.06) contrast(1.04);
}
.layer.back{opacity:.15!important; filter:blur(26px) saturate(1.16)!important;}
.layer.mid{opacity:.40!important; filter:blur(9px) saturate(1.1)!important;}
.crosshair::before,
.crosshair::after{
  background:rgba(255,255,255,.82)!important;
  box-shadow:0 0 10px rgba(255,255,255,.15);
}
.hud-top,
.hud-bot{
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}
.scale-bar .bar{
  box-shadow:0 0 18px rgba(255,255,255,.12);
}
.atlas-dots button{
  width:15px!important;
  height:15px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:rgba(255,255,255,.06)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset!important;
}
.atlas-dots button.active{
  background:linear-gradient(135deg, rgba(251,225,150,.95), rgba(251,225,150,.78))!important;
  box-shadow:0 0 18px rgba(251,225,150,.28)!important;
}
.atlas-step{
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    rgba(7,11,22,.68)!important;
  border-radius:22px;
  padding:28px 30px!important;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
  backdrop-filter:blur(18px) saturate(1.18);
}
.atlas-step.active{
  border-color:rgba(251,225,150,.24)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.28), 0 0 0 1px rgba(251,225,150,.08) inset!important;
}
.hero h1,
.page-hero h1{
  text-wrap:balance;
}
.hero .cta-row .btn,
.page-hero .btn{
  will-change:transform;
}
.topbar{
  background:
    linear-gradient(180deg, rgba(14,25,40,.84), rgba(13,27,42,.68))!important;
}
.progress{
  background:rgba(255,255,255,.04)!important;
}
.progress>span{
  height:3px!important;
}
@media (max-width:900px){
  .atlas-step{border-radius:18px; padding:22px!important;}
  .viewer-bg.on{opacity:.28!important;}
}


/* =========================================================
   V7 PHOTO-LED VIEWER + GALLERY
   ========================================================= */
body[data-page="index"]{
  --hero-photo:url('photo_overview_1.webp');
  --hero-glow:rgba(251,225,150,.18);
}
body[data-page="research"]{ --hero-photo:url('photo_overview_2.webp'); }
body[data-page="technology"]{ --hero-photo:url('photo_overlay_2026.webp'); }
body[data-page="translational"]{ --hero-photo:url('photo_organoid_ring.webp'); }
body[data-page="publications"]{ --hero-photo:url('photo_overlay_2026.webp'); }
body[data-page="team"]{ --hero-photo:url('team/team.jpg'); }
/* Team hero: show the top of the group photo so no heads get cut off */
body[data-page="team"] .page-hero::before{
  background-position:70% 55% !important;
}
/* Mobile: center the team photo vertically with a refined dark-blue surround */
@media (max-width:760px){
  body[data-page="team"] .page-hero::before{
    background:
      radial-gradient(ellipse at 50% 50%, rgba(251,225,150,.06), transparent 55%),
      linear-gradient(180deg, #14263A 0%, rgba(15,30,46,.82) 16%, rgba(13,27,42,0) 34%, rgba(13,27,42,0) 66%, rgba(11,22,36,.82) 84%, #0A1624 100%) center/100% 100% no-repeat,
      url('team/team.jpg') center center / 100% auto no-repeat,
      linear-gradient(180deg, #14263A 0%, #0F1E2E 45%, #0A1624 100%) !important;
  }
}
body[data-page="sponsors"]{ --hero-photo:url('images/13122019_NP0040-ECs-EBs_Biorecator/13122019_NP0040-ECs-EBs_Biorecator_Merged.jpg'); }
body[data-page="contact"]{ --hero-photo:url('images/NP0040-EC_Hoechst/Merg.jpg'); }
body[data-page="news"]{ --hero-photo:url('images/27102019_NP0040-EC_Hoechst/27102019_NP0040-EC_Hoechst_LDL-AF555_Anti-LDL-AF488_Merged_40X_01.jpg'); }

/* Fix: remove isolation so thumbs aren't clipped by stacking context */
.hero-viewer{
  position:relative;
}
.viewer-frame{
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.06), transparent 28%),
    linear-gradient(180deg, rgba(10,13,24,.94), rgba(5,7,14,.99))!important;
  border-radius:18px!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.1) inset,
    0 0 0 1px rgba(255,255,255,.07),
    0 24px 60px rgba(0,0,0,.5),
    0 0 0 1px rgba(251,225,150,.04),
    0 0 60px rgba(251,225,150,.06)!important;
}
.viewer-frame::after,
.atlas-viewer::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
  border-radius:inherit;
  background:
    linear-gradient(115deg, transparent 26%, rgba(255,255,255,.08) 38%, transparent 52%);
  opacity:.35;
  mix-blend-mode:screen;
}
.viewer-frame .hud-top,
.viewer-frame .hud-bot,
.atlas-viewer .hud-top,
.atlas-viewer .hud-bot{
  color:rgba(244,247,255,.88)!important;
}
.viewer-frame .hud-top .sm,
.viewer-frame .hud-bot .sm,
.atlas-viewer .hud-top .sm,
.atlas-viewer .hud-bot .sm,
.viewer-frame .scale-bar span,
.atlas-viewer .scale-bar span{
  color:rgba(214,222,244,.58)!important;
}
.viewer-frame .scale-bar .bar,
.viewer-frame .scale-bar .bar::before,
.viewer-frame .scale-bar .bar::after,
.atlas-viewer .scale-bar .bar,
.atlas-viewer .scale-bar .bar::before,
.atlas-viewer .scale-bar .bar::after{
  background:rgba(245,248,255,.92)!important;
}
.channel .front{filter:drop-shadow(0 26px 42px rgba(0,0,0,.38))!important;}
.channel .back{opacity:.18!important; filter:blur(28px) saturate(1.25)!important;}
.channel .mid{opacity:.45!important; filter:blur(8px)!important;}
.viewer-bg.on{opacity:.42!important;}
.atlas-viewer .viewer-bg.on{opacity:.38!important;}

.hero-thumbs{
  position:relative;
  left:auto; right:auto; bottom:auto;
  z-index:12;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}
.hero-thumb{
  appearance:none; border:0; padding:0; cursor:pointer;
  background:rgba(6,9,20,.92);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.06);
  transition:
    transform .35s cubic-bezier(.19,1,.22,1),
    box-shadow .35s cubic-bezier(.19,1,.22,1),
    opacity .25s ease;
  position:relative;
  text-align:left;
  color:#eef4ff;
}
.hero-thumb img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  opacity:.82;
  transition:opacity .35s ease, transform .5s cubic-bezier(.19,1,.22,1);
  transform:scale(1.02);
}
.hero-thumb:hover img{ opacity:.96; transform:scale(1.05); }
.hero-thumb span{
  display:block;
  padding:6px 10px 8px;
  font-family:"JetBrains Mono",monospace;
  font-size:.5rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(200,218,255,.5);
  transition:color .3s ease;
}
.hero-thumb::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  pointer-events:none;
  z-index:2;
  transition:box-shadow .35s ease;
}
.hero-thumb.active{
  transform:translateY(-3px);
  box-shadow:
    0 14px 36px rgba(0,0,0,.44),
    0 0 0 1.5px rgba(251,225,150,.5),
    0 0 24px rgba(251,225,150,.14);
}
.hero-thumb.active::before{
  box-shadow:inset 0 0 0 1.5px rgba(251,225,150,.25);
}
.hero-thumb.active span{ color:rgba(251,225,150,.88); }
.hero-thumb:not(.active):hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.1);
}
.hero{
  padding-top:116px!important;
  padding-bottom:72px!important;
  align-items:start!important;
  min-height:auto!important;
}

.sec-gallery .photo-band{
  display:grid;
  grid-template-columns:1.45fr .8fr .8fr;
  gap:18px;
  align-items:stretch;
}
.photo-feature{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  min-height:340px;
  background:#060812;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 22px 60px rgba(0,0,0,.28);
}
.photo-feature.wide:nth-of-type(1),
.photo-feature.wide:nth-of-type(5){grid-column:1 / span 2;}
.photo-feature.wide:nth-of-type(4),
.photo-feature.wide:nth-of-type(8){grid-column:2 / span 2;}
.photo-feature img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.2s var(--ease), filter 1.2s var(--ease);
  filter:saturate(1.06) contrast(1.04);
}
.photo-feature::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,8,18,.04), rgba(6,8,18,.54) 55%, rgba(6,8,18,.88)),
    radial-gradient(circle at 18% 18%, rgba(251,225,150,.12), transparent 22%),
    radial-gradient(circle at 86% 14%, rgba(251,225,150,.12), transparent 22%);
  z-index:1;
}
.photo-feature:hover img{transform:scale(1.05);}
.photo-feature[data-gallery]{cursor:zoom-in;}
.photo-feature[data-gallery]:focus-visible{outline:2px solid rgba(251,225,150,.6); outline-offset:3px;}

/* Microscopy lightbox */
.photo-lightbox{
  position:fixed; inset:0; z-index:2000;
  background:#040710;
  display:flex; align-items:center; justify-content:center;
  padding:48px;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s ease, visibility .35s ease;
}
.photo-lightbox.open{opacity:1; visibility:visible; pointer-events:auto;}
.photo-lightbox-close{
  position:absolute; top:18px; right:22px;
  z-index:10;
  width:44px; height:44px; border-radius:50%;
  background:rgba(8,12,24,.78);
  border:1px solid rgba(255,255,255,.32);
  color:#f4f7ff;
  font-size:1.6rem; line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(0,0,0,.45);
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.photo-lightbox-close:hover,
.photo-lightbox-close:focus-visible{background:rgba(251,225,150,.22); border-color:rgba(251,225,150,.55); transform:scale(1.05); outline:none;}
.photo-lightbox-inner{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 320px;
  gap:24px;
  width:100%; max-width:1400px;
  max-height:calc(100vh - 96px);
  align-items:stretch;
}
.photo-lightbox-stage{
  position:relative;
  background:#060812;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  overflow:hidden;
  min-height:0;
  display:flex; align-items:center; justify-content:center;
}
.photo-lightbox-stage img{
  max-width:100%; max-height:calc(100vh - 96px);
  width:auto; height:auto;
  display:block;
  transition:opacity .25s ease;
}
.photo-lightbox-stage img.swapping{opacity:0;}
.photo-lightbox-panel{
  display:flex; flex-direction:column; gap:18px;
  padding:24px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  overflow-y:auto;
}
.photo-lightbox-head .k{
  display:inline-flex;
  padding:6px 11px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:rgba(235,242,255,.82);
  font-family:"JetBrains Mono",monospace;
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:14px;
}
.photo-lightbox-head h3{
  color:#f4f7ff; margin:0 0 8px;
  font-family:var(--serif); font-weight:400;
  font-size:1.5rem; line-height:1.2;
}
.photo-lightbox-head p{
  color:rgba(226,233,246,.74);
  margin:0; font-size:.94rem; line-height:1.55;
}
.photo-lightbox-variants{
  display:flex; flex-direction:column; gap:8px;
  margin-top:4px;
}
.photo-lightbox-variant{
  text-align:left;
  padding:12px 16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  border-radius:10px;
  color:rgba(235,242,255,.82);
  font-family:"JetBrains Mono",monospace;
  font-size:.74rem; letter-spacing:.06em;
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.photo-lightbox-variant:hover{
  background:rgba(251,225,150,.08);
  border-color:rgba(251,225,150,.32);
  color:#f4f7ff;
}
.photo-lightbox-variant.active{
  background:rgba(251,225,150,.14);
  border-color:rgba(251,225,150,.5);
  color:#FBE196;
}
@media (max-width:900px){
  .photo-lightbox{
    padding:64px 16px 24px;
    align-items:flex-start;
  }
  .photo-lightbox-close{
    position:fixed;
    top:max(12px, env(safe-area-inset-top, 0px));
    right:12px;
    width:48px; height:48px;
    font-size:1.7rem;
  }
  .photo-lightbox-inner{grid-template-columns:1fr; max-height:none;}
  .photo-lightbox-stage img{max-height:55vh;}
  .photo-lightbox-panel{max-height:none; overflow:visible;}
}
.photo-meta{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  padding:22px 24px 24px;
}
.photo-meta .k{
  display:inline-flex;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(12px);
  color:rgba(235,242,255,.82);
  font-family:"JetBrains Mono",monospace;
  font-size:.6rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.photo-meta h3{
  color:#f4f7ff;
  margin:0 0 8px;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.2rem, 2vw, 1.8rem);
  line-height:1.08;
  max-width:18ch;
}
.photo-meta p{
  color:rgba(226,233,246,.74);
  margin:0;
  max-width:54ch;
}
/* hero-atlas section replaced by z-stack tunnel */

@media (max-width:1100px){
  .hero-thumbs{margin-top:0;}
  .hero{padding-bottom:60px!important;}
  .sec-gallery .photo-band{grid-template-columns:1fr 1fr;}
  .photo-feature.wide:nth-of-type(1),
  .photo-feature.wide:nth-of-type(4),
  .photo-feature.wide:nth-of-type(5),
  .photo-feature.wide:nth-of-type(8){grid-column:auto;}
}
@media (max-width:760px){
  .hero-thumbs{grid-template-columns:repeat(3,1fr);}
  .sec-gallery .photo-band{grid-template-columns:1fr;}
}

/* ── Logo in navbar ── */
/* Compact topbar. Base topbar is 80px in site.css; 76px makes it
   a touch more compact, with a 68px logo leaving ~4px breathing
   room top and bottom. The progress bar and hero padding-top are
   pinned to the new topbar bottom so the gold line sits flush
   under the nav. */
.topbar{
  height:76px!important;
}
.progress{
  top:76px!important;
}
.brand-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-img {
  height: 68px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 8px rgba(251,225,150,0.25));
  transition: filter .2s;
}
.brand-logo:hover .logo-img {
  filter: drop-shadow(0 0 14px rgba(251,225,150,0.5));
}

/* ── Refined footer layout ── */
.foot{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  padding:0 56px!important;
  border-top:none!important;
}

/* ── Accent bar ── */
.foot-accent{
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(251,225,150,.18) 16%,
    rgba(251,225,150,.42) 50%,
    rgba(251,225,150,.18) 84%,
    transparent 100%
  );
  margin-bottom:48px;
}

/* ── Main area: supporters on top row, brand + nav spanning below ── */
.foot-main{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.9fr);
  grid-template-areas:
    "supporters supporters"
    "brand nav";
  column-gap:56px;
  row-gap:56px;
  padding-bottom:40px;
  align-items:start;
}
.foot-brand{grid-area:brand;}
.foot-nav-group{grid-area:nav;}
.foot-supporters{
  grid-area:supporters;
  padding-bottom:32px;
  border-bottom:1px solid rgba(251,225,150,.08);
}

/* ── Brand column ── */
.foot-brand{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:24px;
}
.foot-logo{
  display:block;
  flex-shrink:0;
  width:fit-content;
}
.foot-logo-img{
  height:104px;
  width:auto;
  display:block;
  opacity:.92;
  filter:drop-shadow(0 0 16px rgba(251,225,150,.16));
  transition:opacity .45s ease, filter .45s ease, transform .45s ease;
}
.foot-logo:hover .foot-logo-img{
  opacity:1;
  filter:drop-shadow(0 0 26px rgba(251,225,150,.4));
  transform:translateY(-1px);
}
.foot-brand-text{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:42ch;
}
.foot-tagline{
  color:rgba(255,255,255,.72)!important;
  font-family:var(--serif)!important;
  font-size:1.22rem!important;
  font-weight:300!important;
  line-height:1.5!important;
  letter-spacing:-.012em!important;
  margin:0!important;
  max-width:38ch!important;
}
.foot-sub{
  color:rgba(255,255,255,.42)!important;
  font-size:.95rem!important;
  line-height:1.65!important;
  margin:0!important;
  max-width:42ch!important;
}

/* ── Shared eyebrow treatment for every footer h4
   (Supported by, Research, Lab, Contact) ── */
.foot-supporters h4,
.foot-nav-group h4{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--mono,"JetBrains Mono",monospace)!important;
  font-size:.88rem!important;
  font-weight:700!important;
  letter-spacing:.22em!important;
  text-transform:uppercase!important;
  color:#FBE196!important;
  margin:0 0 18px!important;
}
.foot-supporters h4::before,
.foot-nav-group h4::before{
  content:"";
  display:block;
  width:22px;
  height:1px;
  background:rgba(251,225,150,.72);
  flex-shrink:0;
}

/* ── Supported by (sponsor list, full-width row under brand + nav) ── */
.foot-supporters{
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr);
  column-gap:56px;
  row-gap:18px;
  align-items:start;
}
.foot-supporters h4{grid-column:1 / -1; margin-bottom:4px!important;}
.foot-supporters .supporters-group{
  margin-top:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.foot-supporters .supporters-group-label{
  font-family:"JetBrains Mono",monospace;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#FBE196;
  margin:0 0 12px;
  display:flex;
  align-items:center;
  gap:10px;
}
.foot-supporters .supporters-group-label::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(251,225,150,.22), rgba(251,225,150,0));
  max-width:120px;
}
.foot-supporters .supporters-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex!important;
  flex-direction:row!important; /* override .foot ul { flex-direction: column } */
  flex-wrap:wrap!important;
  gap:10px;
  align-items:center;
}
.foot-supporters .supporters-list li{
  display:inline-flex;
  margin:0;
}
.foot-supporters .supporters-list a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px 9px 18px;
  border:1px solid rgba(251,225,150,.22)!important;
  border-radius:999px;
  background:rgba(251,225,150,.04);
  font-family:"JetBrains Mono",monospace;
  font-size:.76rem;
  font-weight:500;
  letter-spacing:.08em;
  color:rgba(255,255,255,.78)!important;
  text-decoration:none;
  white-space:nowrap;
  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease;
}
.foot-supporters .supporters-list a::after{
  content:"\2197"; /* ↗ north-east arrow */
  display:inline-block;
  font-size:.84rem;
  line-height:1;
  color:rgba(251,225,150,.6);
  transform:translateY(-1px);
  transition:color .25s ease, transform .25s ease;
}
.foot-supporters .supporters-list a:hover,
.foot-supporters .supporters-list a:focus-visible{
  background:rgba(251,225,150,.14)!important;
  color:#F8F3E8!important;
  border-color:rgba(251,225,150,.55)!important;
  transform:translateY(-1px);
  outline:none;
}
.foot-supporters .supporters-list a:hover::after,
.foot-supporters .supporters-list a:focus-visible::after{
  color:#FBE196;
  transform:translate(1px,-2px);
}

/* ── Nav columns ── */
.foot-nav-group{
  display:grid;
  grid-template-columns:minmax(140px,1fr) minmax(120px,1fr) minmax(210px,1.3fr) minmax(210px,1fr);
  gap:28px;
  padding-top:8px;
}
.foot-nav-group > div:last-child h4{white-space:nowrap;}
.foot-nav-group ul{gap:11px!important;}
.foot-nav-group ul a{
  position:relative;
  font-size:.95rem!important;
  color:rgba(255,255,255,.6)!important;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
  word-break:break-word;
  transition:color .25s ease, border-color .25s ease!important;
}
.foot-nav-group ul a:hover,
.foot-nav-group ul a:focus-visible{
  color:#fff!important;
  border-bottom-color:rgba(251,225,150,.65);
  outline:none;
}

/* ── Bottom bar ── */
.foot-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:30px 0 40px;
  border-top:1px solid rgba(251,225,150,.1);
}
.foot-addr{
  display:flex;
  flex-direction:column;
  gap:3px;
  font-family:var(--mono,"JetBrains Mono",monospace);
  font-size:.66rem;
  letter-spacing:.02em;
  color:rgba(255,255,255,.36);
  line-height:1.55;
}
.foot-addr span:first-child{
  color:rgba(255,255,255,.55);
}
.foot-copy{
  font-family:var(--mono,"JetBrains Mono",monospace);
  font-size:.6rem;
  letter-spacing:.16em;
  color:rgba(251,225,150,.42);
  white-space:nowrap;
  text-transform:uppercase;
}

/* ── Footer responsive ── */
@media(max-width:960px){
  .foot{padding:0 36px!important;}
  .foot-main{
    grid-template-columns:1fr;
    grid-template-areas:
      "supporters"
      "brand"
      "nav";
    gap:40px;
    padding-bottom:36px;
  }
  .foot-accent{margin-bottom:40px;}
  .foot-logo-img{height:84px;}
  .foot-brand{
    flex-direction:row;
    align-items:center;
    gap:20px;
  }
  .foot-brand-text{flex:1; min-width:0;}
  .foot-supporters{max-width:none}
  .foot-tagline{font-size:1.05rem!important;}
  .foot-sub{font-size:.88rem!important;}
}
@media(max-width:768px){
  .foot-nav-group{grid-template-columns:1fr 1fr; gap:28px 24px;}
  .foot-supporters{grid-template-columns:1fr; column-gap:0; row-gap:20px;}
  .foot-bottom{flex-direction:column; align-items:flex-start; gap:16px; padding:24px 0 32px;}
  .foot-supporters .supporters-list a{font-size:.72rem; padding:8px 14px}
  .foot-supporters .supporters-group{margin-top:10px}
}
@media(max-width:480px){
  .foot{padding:0 22px!important;}
  .foot-accent{margin-bottom:24px;}
  .foot-main{gap:28px; padding-bottom:24px}
  .foot-nav-group{grid-template-columns:1fr 1fr; gap:20px 18px;}
  .foot-logo-img{height:64px;}
  .foot-brand{gap:14px}
  .foot-brand-text{gap:6px}
  .foot-supporters{padding-top:14px; row-gap:14px;}
  .foot-supporters > h4{display:none!important;}
  .foot-nav-group h4{
    margin-bottom:10px!important;
    font-size:.72rem!important;
    letter-spacing:.18em!important;
    gap:10px;
  }
  .foot-nav-group h4::before{width:16px;}
  .foot-nav-group ul{gap:7px!important}
  .foot-nav-group ul a{
    font-size:.86rem!important;
    overflow-wrap:anywhere;
  }
  .foot-supporters .supporters-group{gap:8px; margin-top:6px}
  .foot-supporters .supporters-group-label{
    font-size:.7rem;
    letter-spacing:.16em;
    margin:0 0 8px;
  }
  .foot-supporters .supporters-list{gap:6px;}
  .foot-supporters .supporters-list a{
    padding:5px 11px!important;
    font-size:.66rem!important;
    letter-spacing:.06em;
  }
  .foot-tagline{font-size:.98rem!important; max-width:none!important; line-height:1.45!important;}
  .foot-sub{display:none!important;}
}

/* ── Mobile menu dark theme ── */
.menu-toggle span{
  background:#fff!important;
}

/* ── Index-page card dark overrides ── */
.strength,
.platform,
.leader,
.news-item,
.why-diagram{
  background:linear-gradient(180deg, rgba(14,25,40,.78), rgba(10,22,36,.92))!important;
  border-color:var(--line)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, var(--shadow-lg)!important;
  border-radius:24px!important;
}
.strength:hover,
.platform:hover,
.leader:hover,
.news-item:hover{
  border-color:rgba(251,225,150,.22)!important;
}
.leader .portrait{
  background:var(--surface)!important;
  border-bottom-color:var(--line)!important;
}
.strength h3,
.platform h3,
.leader h3,
.news-item h3{
  color:#fff!important;
}
.strength .icon,
.platform .glyph{
  color:var(--text)!important;
}
.why .quote{
  color:var(--text-2)!important;
  max-width:none!important;
}
#platforms .sec-head .sec-lede{
  max-width:none!important;
}
.meta-right .uni-seal img{
  filter:brightness(0) invert(1)!important;
}
.why-diagram svg{
  stroke:var(--text)!important;
}
.join-cta{
  border-top-color:var(--line)!important;
}

/* ── Mobile team page fit ── */
@media(max-width:760px){
  .page-hero{padding:88px 16px 12px!important;}
  .page-hero h1{font-size:2.2rem!important; line-height:1.06!important; overflow-wrap:break-word!important; max-width:none!important; margin:0 auto 14px!important;}
  .page-hero .lede{font-size:1.18rem!important; line-height:1.62!important; margin:0 auto!important;}
  .page-hero .eyebrow{margin-bottom:10px!important; font-size:.62rem!important;}
  .page-hero::before,.page-hero::after{inset:74px 10px 0 10px!important; border-radius:20px!important;}
  .card-grid.four{display:grid!important; grid-template-columns:1fr 1fr!important; justify-content:start!important; flex-wrap:nowrap!important;}
  .card-grid.four > .fig-card{flex:none!important; max-width:none!important; width:100%!important;}
  /* Home page hero: let text fill full width instead of balanced short lines */
  .hero{padding:88px 16px 48px!important; gap:32px!important;}
  .hero h1{text-wrap:wrap!important; max-width:none!important; font-size:2rem!important; line-height:1.1!important;}
  .hero .lede{max-width:none!important; font-size:.88rem!important; line-height:1.55!important;}
  .hero .eyebrow{font-size:.58rem!important;}
  /* Make sure the status-indicator dot never leaks through on mobile */
  .meta-right, .meta-right *{display:none!important;}
}

/* Left-align split-sec prose on mobile across all pages (overrides
   the site.css center treatment at <=900px). */
@media (max-width:900px){
  .split-sec .split-prose{text-align:left!important;}
  .split-sec .split-prose .num{justify-content:flex-start!important;}
  .split-sec .split-prose h3{margin-left:0!important; margin-right:0!important;}
  .split-sec .split-prose p{margin-left:0!important; margin-right:0!important;}
  .split-sec .split-prose .btn{margin-left:0!important; margin-right:0!important;}
}

/* ============================================================
   SITE-WIDE TYPOGRAPHY — two fonts only
   One font throughout (Manrope / sans), with Cormorant (serif)
   kept only as the single highlight on the large display headings
   and card titles. This removes the monospace label font and any
   stray serif on body-level text so every page uses at most two
   font styles. The :not(#_) bump raises specificity above the
   per-component font rules without needing per-element overrides.
   ============================================================ */
body *:not(#_){
  font-family:var(--sans,"Manrope",system-ui,sans-serif)!important;
}
body .display:not(#_),
body .display *:not(#_),
body h1:not(#_), body h1 *:not(#_),
body h2:not(#_), body h2 *:not(#_),
body h3:not(#_), body h3 *:not(#_),
body .card h3:not(#_){
  font-family:var(--serif,"Cormorant Garamond",Georgia,serif)!important;
}

/* ============================================================
   Heading emphasis: an <em> inside any heading takes that heading's
   own font and is never italic, so a heading never mixes serif + sans
   or shows a stray italic word. Body-text emphasis (e.g. journal names
   in .meta-line, which are not headings) keeps its italic.
   ============================================================ */
h1 em:not(#_), h2 em:not(#_), h3 em:not(#_),
h4 em:not(#_), h5 em:not(#_), h6 em:not(#_),
.display em:not(#_), #bioName em{
  font-family:inherit !important;
  font-style:normal !important;
}

/* ============================================================
   Mobile page-hero eyebrow centering: drop the leading dash so the
   label itself is centred, not "dash + label" (which pushed the text
   right of centre). Applies to every subpage hero.
   ============================================================ */
@media (max-width:900px){
  .page-hero{text-align:center;}
  .page-hero .eyebrow{justify-content:center;}
  .page-hero .eyebrow::before{display:none !important;}
}

/* ============================================================
   Mobile: never force split-section headings onto one line — the
   nowrap made long titles (e.g. "Microfluidic encapsulation")
   overflow the viewport and get clipped. Let them wrap/break.
   ============================================================ */
@media (max-width:900px){
  .split-sec .split-prose h3:not(#_){
    white-space:normal !important;
    overflow-wrap:break-word;
    word-break:break-word;
    max-width:100% !important;
  }
}