/* ═══════════════════════════════════════════════
   FU LAB — Multi-Page Website
   Dark Red / Chromosome Theme
   ═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg-deep: #2B0A0A;
  --bg-dark: #3A1515;
  --bg-mid: #4D1E1E;
  --bg-card: rgba(60,15,20,0.4);
  --bg-card-hover: rgba(80,20,25,0.5);
  --maroon: #601515;
  --red: #D94050;
  --red-bright: #F05565;
  --gold: #E0B860;
  --gold-light: #F0D080;
  --gold-dim: rgba(224,184,96,0.18);
  --teal: #6CCECE;
  --teal-dim: rgba(108,206,206,0.15);
  --cream: #F8F0E5;
  --cream-dim: rgba(248,240,229,0.9);
  --cream-faint: rgba(248,240,229,0.65);
  --cream-ghost: rgba(248,240,229,0.4);
  --white: #FFFEF9;
  --border: rgba(248,240,229,0.12);
  --border-hover: rgba(248,240,229,0.25);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Outfit', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --ease: cubic-bezier(0.4,0,0.2,1);
  --ease-bounce: cubic-bezier(0.34,1.56,0.64,1);
  --radius: 10px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:var(--font-body);background:var(--bg-deep);color:var(--cream);line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}

/* ══ CURSOR GLOW ══ */
.cursor-glow{position:fixed;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(224,184,96,0.14) 0%,rgba(217,64,80,0.08) 35%,transparent 70%);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);opacity:0;transition:opacity 0.5s;mix-blend-mode:screen}
body:hover .cursor-glow{opacity:1}

/* ══ NAVBAR — TRANSPARENT, EXPANDS ON HOVER ══ */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:transparent;border-bottom:1px solid transparent;transition:all 0.5s var(--ease)}
.navbar .nav-inner{transition:height 0.5s var(--ease),padding 0.5s var(--ease)}
.navbar:hover,.navbar.scrolled{background:rgba(43,10,10,0.82);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border-bottom-color:var(--border)}
/* Expand on hover */
.navbar:hover .nav-inner{height:88px;padding:0 3rem}
.navbar.scrolled{box-shadow:0 4px 30px rgba(0,0,0,0.3)}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 2.5rem;height:74px}
.nav-brand{display:flex;align-items:center;gap:14px;transition:transform 0.4s var(--ease),gap 0.4s var(--ease)}
.navbar:hover .nav-brand{transform:scale(1.05);gap:18px}
.nav-brand img{height:42px;width:auto;transition:height 0.4s var(--ease),filter 0.4s}
.navbar:hover .nav-brand img{height:48px}
.nav-brand-text{font-family:var(--font-display);font-size:1.3rem;font-weight:500;color:var(--gold);letter-spacing:0.06em;transition:all 0.4s var(--ease)}
.navbar:hover .nav-brand-text{font-size:1.4rem;text-shadow:0 0 20px rgba(224,184,96,0.3);letter-spacing:0.08em}
.nav-links{display:flex;gap:0.25rem;transition:gap 0.4s var(--ease)}
.navbar:hover .nav-links{gap:0.5rem}
.nav-links a{padding:10px 18px;border-radius:8px;font-size:0.82rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:rgba(248,240,229,0.5);transition:all 0.4s var(--ease);position:relative;overflow:hidden}
.nav-links a::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(224,184,96,0.15),transparent 70%);opacity:0;transition:opacity 0.4s}
.nav-links a:hover::before,.nav-links a.active::before{opacity:1}
.nav-links a:hover{color:var(--gold);letter-spacing:0.08em;transform:scale(1.08)}
.nav-links a.active{color:var(--gold);font-weight:600;letter-spacing:0.06em}
.nav-links a:active{transform:scale(0.95);transition:transform 0.1s}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--cream);margin:5px 0;border-radius:1px;transition:0.3s}
.nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ══ HERO (Home) ══ */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;text-align:center;padding:100px 2rem 80px}
.hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,10,10,0.4) 0%,rgba(43,10,10,0.25) 40%,rgba(43,10,10,0.55) 100%)}
.hero-content{position:relative;z-index:2;max-width:850px}
.hero-tag{display:inline-flex;align-items:center;gap:12px;font-size:0.72rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:2rem;opacity:0;animation:fadeUp 1s 0.2s var(--ease) forwards}
.hero-tag::before,.hero-tag::after{content:'';width:40px;height:1px;background:var(--gold)}
.hero h1{font-family:var(--font-display);font-size:clamp(2.8rem,6.5vw,5.2rem);font-weight:400;line-height:1.08;color:var(--white);letter-spacing:-0.02em;margin-bottom:1.5rem;opacity:0;animation:fadeUp 1s 0.4s var(--ease) forwards}
.hero h1 em{font-style:italic;color:var(--gold);text-shadow:0 0 40px rgba(212,168,85,0.3)}
.hero-desc{font-size:1.15rem;font-weight:300;line-height:1.85;color:var(--cream-dim);max-width:560px;margin:0 auto 2.5rem;opacity:0;animation:fadeUp 1s 0.6s var(--ease) forwards}
.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp 1s 0.8s var(--ease) forwards}
.hero-scroll{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);z-index:2;opacity:0;animation:fadeUp 1s 1.2s var(--ease) forwards}
.hero-scroll span{display:block;width:1px;height:50px;background:linear-gradient(to bottom,var(--gold),transparent);margin:0 auto 8px;animation:scrollPulse 2s ease-in-out infinite}
.hero-scroll small{font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--cream-ghost)}
@keyframes scrollPulse{0%,100%{opacity:0.3;transform:scaleY(0.7)}50%{opacity:1;transform:scaleY(1)}}

/* ══ FLOATING INTERACTIVE ELEMENTS — VISIBLE & BOLD ══ */
.float-layer{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
/* The JS sets transform on .float-el for cursor tracking.
   CSS animations go on ::before pseudo so they don't conflict. */
.float-el{position:absolute;will-change:transform;transition:transform 0.6s cubic-bezier(0,0,0.2,1)}

/* Rings — cursor-trackable wrappers, ring drawn via ::before */
.fl-ring{width:0;height:0}
.fl-ring::before{content:'';position:absolute;border-radius:50%;border-style:solid;animation:ringFloat ease-in-out infinite alternate}
.fl-ring-1{top:8%;left:2%}
.fl-ring-1::before{width:320px;height:320px;top:-160px;left:-160px;border-width:2px;border-color:rgba(224,184,96,0.25);box-shadow:0 0 30px rgba(224,184,96,0.08),inset 0 0 30px rgba(224,184,96,0.04);animation-duration:12s}
.fl-ring-2{top:55%;right:5%}
.fl-ring-2::before{width:200px;height:200px;top:-100px;left:-100px;border-width:1.5px;border-color:rgba(108,206,206,0.22);box-shadow:0 0 25px rgba(108,206,206,0.06);animation-duration:15s;animation-delay:2s}
.fl-ring-3{top:18%;right:4%}
.fl-ring-3::before{width:450px;height:450px;top:-225px;left:-225px;border-width:1.5px;border-color:rgba(217,64,80,0.18);box-shadow:0 0 40px rgba(217,64,80,0.05);animation-duration:18s;animation-delay:1s}
.fl-ring-4{bottom:12%;left:12%}
.fl-ring-4::before{width:150px;height:150px;top:-75px;left:-75px;border-width:2px;border-color:rgba(224,184,96,0.2);box-shadow:0 0 20px rgba(224,184,96,0.06);animation-duration:10s;animation-delay:3s}
@keyframes ringFloat{0%{transform:scale(1) rotate(0deg)}100%{transform:scale(1.06) rotate(3deg)}}

/* Dots — fewer, just 4 key accent dots */
.fl-dot{width:0;height:0}
.fl-dot::before{content:'';position:absolute;border-radius:50%;animation:dotPulse ease-in-out infinite}
.fl-dot-1{top:18%;left:14%}
.fl-dot-1::before{width:8px;height:8px;top:-4px;left:-4px;background:var(--gold);opacity:0.3;animation-duration:4s;box-shadow:0 0 15px rgba(224,184,96,0.3)}
.fl-dot-2{top:68%;left:22%}
.fl-dot-2::before{width:6px;height:6px;top:-3px;left:-3px;background:var(--teal);opacity:0.35;animation-duration:3.5s;animation-delay:1s;box-shadow:0 0 12px rgba(108,206,206,0.3)}
.fl-dot-3{top:25%;right:28%}
.fl-dot-3::before{width:10px;height:10px;top:-5px;left:-5px;background:var(--red);opacity:0.2;animation-duration:5s;animation-delay:0.5s;box-shadow:0 0 16px rgba(217,64,80,0.2)}
.fl-dot-4{top:72%;right:12%}
.fl-dot-4::before{width:7px;height:7px;top:-3px;left:-3px;background:var(--gold);opacity:0.25;animation-duration:4s;animation-delay:2s;box-shadow:0 0 12px rgba(224,184,96,0.2)}
@keyframes dotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.8)}}

/* Illuminating orbs */
.fl-orb::before{content:'';position:absolute;border-radius:50%;filter:blur(50px);animation:orbBreathe ease-in-out infinite alternate}
.fl-orb-1{top:0%;left:-8%}
.fl-orb-1::before{width:400px;height:400px;top:-200px;left:-200px;background:rgba(217,64,80,0.15);animation-duration:7s}
.fl-orb-2{bottom:5%;right:-5%}
.fl-orb-2::before{width:350px;height:350px;top:-175px;left:-175px;background:rgba(224,184,96,0.12);animation-duration:9s;animation-delay:2s}
.fl-orb-3{top:35%;left:45%}
.fl-orb-3::before{width:300px;height:300px;top:-150px;left:-150px;background:rgba(108,206,206,0.08);animation-duration:11s;animation-delay:4s}
@keyframes orbBreathe{0%{transform:scale(1);opacity:0.7}100%{transform:scale(1.2);opacity:1}}

/* DNA-like strands */
.fl-strand::before{content:'';position:absolute;width:3px;border-radius:2px;animation:strandDrift linear infinite}
.fl-strand-1{top:8%;left:10%}
.fl-strand-1::before{height:250px;background:linear-gradient(to bottom,transparent,var(--gold) 30%,var(--gold) 70%,transparent);opacity:0.12;animation-duration:14s}
.fl-strand-2{top:25%;right:12%}
.fl-strand-2::before{height:200px;background:linear-gradient(to bottom,transparent,var(--teal) 30%,var(--teal) 70%,transparent);opacity:0.1;animation-duration:18s;animation-delay:3s}
.fl-strand-3{bottom:2%;left:32%}
.fl-strand-3::before{height:220px;background:linear-gradient(to bottom,transparent,var(--red) 30%,var(--red) 70%,transparent);opacity:0.1;animation-duration:16s;animation-delay:6s}
@keyframes strandDrift{0%{transform:translateY(30px) rotate(0deg);opacity:0}15%{opacity:0.12}85%{opacity:0.12}100%{transform:translateY(-120px) rotate(4deg);opacity:0}}

/* ══ PAGE HERO (sub-pages) — with chromosome background, smooth bottom transition ══ */
.page-hero{padding:160px 2rem 28px;position:relative;overflow:hidden;background:var(--bg-deep)}
/* Tighten the big empty band between a subpage hero and its first section.
   Was ~220px (100px hero bottom + 120px section top); now ~68px. */
.page-hero + section{padding-top:40px}
.page-hero-bg{position:absolute;inset:0;background-image:url('assets/images/hero-bg.png');background-size:cover;background-position:center;z-index:0}
.page-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,10,10,0.5) 0%,rgba(43,10,10,0.35) 40%,rgba(72,26,30,0.7) 70%,#5C2028 100%)}
.page-hero::before{content:'';position:absolute;top:-200px;right:-150px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(224,184,96,0.08) 0%,transparent 65%);animation:orbBreathe 10s ease-in-out infinite alternate;z-index:1}
.page-hero .container{position:relative;z-index:2}
.page-hero-tag{display:inline-flex;align-items:center;gap:10px;font-size:0.72rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.page-hero-tag::before{content:'';width:36px;height:1px;background:var(--gold)}
.page-hero h1{font-family:var(--font-display);font-size:clamp(2.2rem,4.5vw,3.4rem);line-height:1.15;color:var(--white);letter-spacing:-0.02em}
.page-hero h1 em{font-style:italic;color:var(--gold);text-shadow:0 0 30px rgba(212,168,85,0.25)}
.page-hero-desc{font-size:1.05rem;color:var(--cream-faint);max-width:640px;margin-top:1rem;line-height:1.8;text-wrap:balance}

/* ══ BUTTONS ══ */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:var(--radius);font-family:var(--font-body);font-size:0.88rem;font-weight:600;letter-spacing:0.03em;cursor:pointer;border:none;transition:all 0.4s var(--ease);position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,0.15),transparent 60%);opacity:0;transition:opacity 0.4s}
.btn:hover::after{opacity:1}
.btn-gold{background:var(--gold);color:var(--bg-deep);box-shadow:0 4px 20px rgba(212,168,85,0.3)}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 8px 35px rgba(212,168,85,0.4)}
.btn-ghost{background:transparent;color:var(--cream);border:1.5px solid var(--cream-ghost)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-dim);transform:translateY(-2px)}
.btn-goldline{background:transparent;color:var(--gold);border:1.5px solid var(--gold)}
.btn-goldline:hover{background:var(--gold-dim);color:var(--gold-light);border-color:var(--gold-light);transform:translateY(-2px)}
.btn-sm{padding:9px 20px;font-size:0.82rem}

/* ══ SECTIONS ══ */
section{padding:76px 0;position:relative;z-index:1}
.container{max-width:1200px;margin:0 auto;padding:0 2.5rem}
.section-dark{background:linear-gradient(180deg,#5C2028,#4A1A22)}
.section-mid{background:linear-gradient(180deg,#4A1A22,#3E161C)}
.section-header{margin-bottom:4rem}
.section-tag{display:inline-flex;align-items:center;gap:10px;font-size:0.7rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.section-tag::before{content:'';width:30px;height:1px;background:var(--gold)}
.section-title{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.2rem);font-weight:400;color:var(--white);line-height:1.15}
.section-subtitle{font-size:1.05rem;font-weight:300;color:var(--cream-faint);max-width:580px;margin-top:1rem;line-height:1.8}

/* ══ CARDS ══ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.card{background:var(--bg-card);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:var(--radius);padding:2.5rem 2rem;transition:all 0.45s var(--ease);position:relative;overflow:hidden}
.card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,0.03),transparent 50%);opacity:0;transition:opacity 0.4s}
.card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;transform:scaleX(0);transform-origin:left;transition:transform 0.45s var(--ease)}
.card:hover{background:var(--bg-card-hover);border-color:var(--border-hover);transform:translateY(-5px);box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.card:hover::before{opacity:1}
.card:hover::after{transform:scaleX(1)}
.card-gold::after{background:var(--gold)}.card-teal::after{background:var(--teal)}.card-red::after{background:var(--red)}
.card-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;font-size:1.5rem;transition:transform 0.5s var(--ease-bounce)}
.card:hover .card-icon{transform:scale(1.15) rotate(-5deg)}
.icon-gold{background:var(--gold-dim)}.icon-teal{background:var(--teal-dim)}.icon-red{background:rgba(201,53,69,0.15)}
.card h3{font-family:var(--font-display);font-size:1.35rem;font-weight:600;color:var(--white);margin-bottom:0.75rem;line-height:1.3}
.card p{font-size:0.92rem;color:var(--cream-faint);line-height:1.8}
.card-link{display:inline-block;margin-top:1.25rem;font-size:0.82rem;font-weight:600;color:var(--gold);border-bottom:1px solid transparent;transition:0.3s}
.card-link:hover{border-bottom-color:var(--gold)}

.tech-badge{display:inline-block;font-family:var(--font-mono);font-size:0.68rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;padding:4px 14px;border-radius:5px;margin-bottom:1.25rem}
.badge-gold{background:var(--gold-dim);color:var(--gold)}.badge-teal{background:var(--teal-dim);color:var(--teal)}
.tech-pub{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border);font-size:0.82rem;color:var(--cream-ghost)}.tech-pub em{color:var(--teal);font-style:italic}

/* ══ PUBLICATIONS ══ */
.pub-list{display:flex;flex-direction:column;gap:1rem}
.pub-item{background:var(--bg-card);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem 2rem;display:grid;grid-template-columns:auto 1fr auto;gap:1.25rem;align-items:center;transition:all 0.4s var(--ease)}
.pub-item:hover{border-color:var(--border-hover);background:var(--bg-card-hover);transform:translateX(6px);box-shadow:0 8px 30px rgba(0,0,0,0.3)}
.pub-year{font-family:var(--font-mono);font-size:0.75rem;font-weight:500;color:var(--gold);background:var(--gold-dim);padding:5px 12px;border-radius:5px}
.pub-info h4{font-size:0.95rem;font-weight:500;color:var(--cream-dim);line-height:1.55}
.pub-journal{font-size:0.82rem;color:var(--cream-ghost);margin-top:0.25rem}.pub-journal em{color:var(--teal);font-style:italic}
.pub-link{font-size:0.75rem;font-weight:600;color:var(--gold);padding:5px 12px;border:1px solid var(--border);border-radius:5px;transition:0.3s}.pub-link:hover{background:var(--gold-dim);border-color:var(--gold)}

/* ══ TEAM ══ */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.75rem}
.team-card{text-align:center;padding:2.5rem 1.5rem;background:var(--bg-card);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:var(--radius);transition:all 0.4s var(--ease)}
.team-card:hover{border-color:var(--border-hover);transform:translateY(-5px);box-shadow:0 16px 50px rgba(0,0,0,0.4)}
.team-card.pi{border-color:rgba(212,168,85,0.2)}
.team-avatar{width:100px;height:100px;border-radius:50%;margin:0 auto 1.25rem;object-fit:cover;border:3px solid var(--border);transition:0.4s var(--ease)}
.team-card:hover .team-avatar{border-color:var(--gold);transform:scale(1.06);box-shadow:0 0 25px rgba(212,168,85,0.2)}
.team-avatar-ph{width:100px;height:100px;border-radius:50%;margin:0 auto 1.25rem;background:linear-gradient(135deg,rgba(201,53,69,0.15),rgba(91,184,184,0.1));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.6rem;color:var(--gold);border:3px solid var(--border);transition:0.4s}
.team-card:hover .team-avatar-ph{border-color:var(--gold);box-shadow:0 0 25px rgba(212,168,85,0.2)}
.team-card h4{font-family:var(--font-display);font-size:1.15rem;color:var(--white);margin-bottom:0.25rem}
.team-role{font-size:0.75rem;color:var(--teal);font-weight:600;text-transform:uppercase;letter-spacing:0.07em;margin-bottom:0.5rem}
.team-desc{font-size:0.85rem;color:var(--cream-ghost);line-height:1.65}

/* ══ NEWS ══ */
.news-list{display:flex;flex-direction:column;gap:1.25rem}
.news-item{background:var(--bg-card);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem 2rem;display:grid;grid-template-columns:auto 1fr;gap:1.5rem;transition:0.4s var(--ease)}
.news-item:hover{border-color:var(--border-hover);background:var(--bg-card-hover);transform:translateX(4px)}
.news-date{font-family:var(--font-mono);font-size:0.7rem;font-weight:500;color:var(--teal);background:var(--teal-dim);padding:4px 10px;border-radius:4px;align-self:start;white-space:nowrap}
.news-item h4{font-size:1rem;font-weight:600;color:var(--cream-dim);margin-bottom:0.3rem}
.news-item p{font-size:0.88rem;color:var(--cream-ghost);line-height:1.7}

/* ══ CTA ══ */
.cta-section{background:linear-gradient(165deg,#3E161C,#351318 50%,#2E1015);text-align:center;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;top:-200px;right:-100px;background:radial-gradient(circle,rgba(212,168,85,0.06) 0%,transparent 65%)}
.positions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;text-align:left;margin-top:3rem}
.pos-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius);padding:2rem;transition:0.4s var(--ease)}.pos-card:hover{background:rgba(255,255,255,0.06);transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,0.3)}
.pos-card h4{font-size:1rem;font-weight:600;color:var(--white);margin-bottom:0.5rem}.pos-card p{font-size:0.85rem;color:var(--cream-ghost);line-height:1.7}
.cta-email{display:inline-block;margin-top:2.5rem;font-family:var(--font-mono);font-size:1.05rem;color:var(--gold);border-bottom:1px dashed var(--gold);transition:0.3s}.cta-email:hover{color:var(--white);border-color:var(--white)}

/* ══ CONTACT ══ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.contact-block h3{font-family:var(--font-display);font-size:1.5rem;color:var(--white);margin-bottom:1.5rem}
.contact-row{display:flex;gap:0.75rem;margin-bottom:1.25rem;font-size:0.92rem;color:var(--cream-faint)}
.contact-row .label{font-weight:600;color:var(--cream-dim);min-width:90px}
.contact-row a{color:var(--teal);transition:0.3s}.contact-row a:hover{color:var(--gold)}
.contact-map{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;height:320px}
.contact-map iframe{width:100%;height:100%;border:none;filter:grayscale(0.5) brightness(0.6) contrast(1.1) hue-rotate(340deg)}

/* ══ FOOTER ══ */
footer{background:#2A0E12;border-top:1px solid rgba(248,240,229,0.08);padding:2.5rem 0}
.footer-inner{max-width:1200px;margin:0 auto;padding:0 2.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
footer p{font-size:0.8rem;color:var(--cream-ghost)}footer a{color:var(--gold);transition:0.3s}footer a:hover{color:var(--white)}
.footer-links{display:flex;gap:1.5rem}.footer-links a{font-size:0.8rem;font-weight:500}

/* ══ ANIMATIONS ══ */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.fade-in{opacity:0;transform:translateY(25px);transition:opacity 0.8s var(--ease),transform 0.8s var(--ease)}
.fade-in.visible{opacity:1;transform:translateY(0)}
.delay-1{transition-delay:0.12s}.delay-2{transition-delay:0.24s}.delay-3{transition-delay:0.36s}

/* ══ ANIMATED CARD ICONS ══ */
.ico{overflow:visible}
.ico *{transform-box:fill-box;transform-origin:center}
/* pillars */
@keyframes icoCell{0%,100%{opacity:.5;transform:scale(.72)}50%{opacity:1;transform:scale(1.18)}}
.ico .c{animation:icoCell 2.4s ease-in-out infinite}
@keyframes icoTumor{0%,100%{opacity:.45;transform:scale(.78)}50%{opacity:1;transform:scale(1.32)}}
.ico .tumor{animation:icoTumor 1.8s ease-in-out infinite}
/* aging: a cell that accumulates mutation spots one by one, then resets */
.ico-mut .m1,.ico-mut .m2,.ico-mut .m3,.ico-mut .m4,.ico-mut .m5{transform-box:fill-box;transform-origin:center}
@keyframes mut1{0%,4%{opacity:0;transform:scale(0)}12%,90%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(0)}}
@keyframes mut2{0%,20%{opacity:0;transform:scale(0)}28%,90%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(0)}}
@keyframes mut3{0%,36%{opacity:0;transform:scale(0)}44%,90%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(0)}}
@keyframes mut4{0%,52%{opacity:0;transform:scale(0)}60%,90%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(0)}}
@keyframes mut5{0%,68%{opacity:0;transform:scale(0)}76%,90%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(0)}}
.ico-mut .m1{animation:mut1 5s ease-in-out infinite}
.ico-mut .m2{animation:mut2 5s ease-in-out infinite}
.ico-mut .m3{animation:mut3 5s ease-in-out infinite}
.ico-mut .m4{animation:mut4 5s ease-in-out infinite}
.ico-mut .m5{animation:mut5 5s ease-in-out infinite}
@keyframes scanPath{0%{transform:translate(-5px,-4px) scale(1)}20%{transform:translate(4px,-3px) scale(1)}40%{transform:translate(5px,4px) scale(1)}55%{transform:translate(-4px,3px) scale(1)}70%{transform:translate(0,0) scale(1.18)}82%,100%{transform:translate(0,0) scale(1)}}
.ico-scan .reticle{transform-box:view-box;transform-origin:12.5px 12px;animation:scanPath 3.4s ease-in-out infinite}
/* cancer: the red cell is found (pops), then KILLED (collapses to nothing), then a new one appears */
@keyframes findKill{0%,60%{opacity:.4;transform:scale(.78)}70%{opacity:1;transform:scale(1.5)}79%{opacity:1;transform:scale(1.15)}87%{opacity:.85;transform:scale(.32)}92%,100%{opacity:0;transform:scale(0)}}
.ico-scan .tumor{transform-box:view-box;transform-origin:12.5px 12px;animation:findKill 3.4s ease-in-out infinite}
/* Join Us role icons — animate only while the card is hovered, settle back on leave */
.ico-grad .tassel{transform-box:view-box;transform-origin:18px 9px;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.card:hover .ico-grad .tassel{transform:rotate(30deg)}
@keyframes icoBubble{0%{transform:translateY(3px);opacity:0}25%{opacity:1}100%{transform:translateY(-9px);opacity:0}}
.ico-flask .bub{opacity:0}
.card:hover .ico-flask .bub{animation:icoBubble 1.9s ease-in-out infinite}
.card:hover .ico-flask .bub:nth-of-type(2){animation-delay:.7s}
.card:hover .ico-flask .bub:nth-of-type(3){animation-delay:1.3s}
@keyframes icoSunSpin{to{transform:rotate(360deg)}}
.ico-sun .rays{transform-box:view-box;transform-origin:12px 12px}
.card:hover .ico-sun .rays{animation:icoSunSpin 7s linear infinite}
@keyframes icoSunCore{0%,100%{transform:scale(.85);opacity:.75}50%{transform:scale(1.12);opacity:1}}
.ico-sun .core{transform-box:view-box;transform-origin:12px 12px}
.card:hover .ico-sun .core{animation:icoSunCore 2.2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.ico *{animation:none!important}}

/* ══ RESPONSIVE ══ */
@media(max-width:960px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}.positions-grid{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr}}
@media(max-width:700px){section{padding:80px 0}.container{padding:0 1.5rem}.nav-links{display:none;flex-direction:column;position:absolute;top:74px;left:0;right:0;background:rgba(43,10,10,0.97);padding:1rem 2rem 1.5rem;border-bottom:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,0.5)}.nav-links.open{display:flex}.nav-toggle{display:block}.navbar.has-open-menu{background:rgba(43,10,10,0.92)!important;backdrop-filter:blur(20px)!important}.pub-item{grid-template-columns:1fr}.team-grid{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:clamp(2.2rem,8vw,3.5rem)}.float-layer{display:none}.page-hero{padding:130px 1.5rem 60px}}
@media(max-width:480px){.team-grid{grid-template-columns:1fr}}