:root { --bg:#0b0d12; --text:#e6e8ef; --muted:#a7adc4; --card:#121623; --brand:#7C3AED; --brand-2:#00D1FF; }
@media (prefers-color-scheme: light){ :root{ --bg:#ffffff; --text:#0b0d12; --muted:#444b5f; --card:#f5f7fb; } }
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';line-height:1.5}
a{color:var(--brand-2);text-decoration:none} a:hover{text-decoration:underline}
.site-header{position:sticky;top:0;backdrop-filter:saturate(120%) blur(8px);background:color-mix(in oklab,var(--bg) 70%,transparent);border-bottom:1px solid color-mix(in oklab,var(--text) 15%,transparent);display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;z-index:50}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--text)}
.brand .logo{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--brand-2),var(--brand));color:white;font-weight:800}
.brand-text{letter-spacing:.2px}
.site-nav{display:flex;gap:.9rem;margin-left:auto;align-items:center}
.site-nav a{padding:.4rem .6rem;border-radius:.5rem}
.site-nav .btn{background:linear-gradient(135deg,var(--brand-2),var(--brand));color:white}
.nav-toggle{display:none;margin-left:auto;font-size:1.25rem;background:none;border:1px solid color-mix(in oklab,var(--text) 20%,transparent);border-radius:.5rem;padding:.2rem .5rem;color:var(--text)}
@media (max-width:860px){ .site-nav{display:none}.nav-toggle{display:block}.site-nav.open{display:flex;flex-direction:column;position:absolute;top:56px;right:10px;background:var(--card);padding:.5rem;border:1px solid color-mix(in oklab,var(--text) 12%,transparent);border-radius:.6rem} }
.hero{position:relative;padding:6rem 1rem 2rem;overflow:hidden}
.hero-inner{max-width:1024px;margin:0 auto}
.hero h1{font-size:clamp(2rem,4vw + 1rem,3.5rem);margin:0 0 .5rem}
.lead{font-size:1.1rem;color:var(--muted);max-width:60ch}
.cta-row{display:flex;gap:.8rem;margin-top:1rem}
.btn{display:inline-block;padding:.7rem 1rem;border-radius:.6rem;border:1px solid transparent;font-weight:600}
.btn.secondary{background:transparent;border-color:color-mix(in oklab,var(--text) 20%,transparent);color:var(--text)}
.page-header{max-width:1024px;margin:2rem auto 1rem;padding:0 1rem}
.content{max-width:1024px;margin:1rem auto 2rem;padding:0 1rem}
.highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;max-width:1024px;margin:2rem auto;padding:0 1rem}
.highlights article{background:var(--card);padding:1rem;border-radius:.8rem;border:1px solid color-mix(in oklab,var(--text) 10%,transparent)}
.site-footer{border-top:1px solid color-mix(in oklab,var(--text) 15%,transparent);padding:2rem 1rem;text-align:center;color:var(--muted)}
.hero-bg{position:absolute;inset:auto 0 0 0;height:220px;pointer-events:none;color:var(--brand)}
@media (max-width:900px){ .highlights{grid-template-columns:1fr} }


/* --- Overrides: flush-left page headers & team photo size --- */
.page-header { max-width: none !important; margin: 2rem 0 1rem !important; padding: 0 !important; }
.page-header h1 { margin: 0 0 .5rem 0 !important; text-align: left !important; }

/* keep main content centered */
.content { max-width: 1024px; margin: 1rem auto 2rem; padding: 0 1rem; }

/* Team photo at 50% width (centered) */
.team-photo {
  width: 50% !important;
  height: auto;
  display: block;
  margin: 1rem auto;
  border-radius: .6rem;
  border: 1px solid color-mix(in oklab, var(--text) 12%, transparent);
}


/* --- People grid & team photo sizing --- */
.team-photo {
  width: 50% !important;
  height: auto;
  display: block;
  margin: 1rem auto;
  border-radius: .6rem;
  border: 1px solid color-mix(in oklab, var(--text) 12%, transparent);
}
.people-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1024px;
  margin: 1rem auto 2rem;
  padding: 0 1rem;
}
.person img {
  width: 200px;          /* fixed width */
  height: 200px;         /* fixed height for uniform squares */
  object-fit: cover;     /* crop to fill square without distortion */
  display: block;
  margin: 0 auto;
  border-radius: .6rem;
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
}
.person img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: .6rem;
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
}
.person img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: .6rem;
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
}
.person .name { font-weight: 700; margin-top: .6rem; }
.person .role { color: var(--muted); font-size: .9rem; }
@media (max-width: 900px) { .people-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .people-grid { grid-template-columns: 1fr; } }


/* === Overrides (2025-10-11): headings flush-left, team photo 30vw, uniform headshots === */

/* Page titles: full-bleed header aligned with site edge (same 1rem inset as nav) */
.page-header { max-width: none !important; margin: 2rem 0 1rem !important; padding: 0 1rem !important; }
.page-header h1 { margin: 0 !important; text-align: left !important; }

/* Keep content centered for readability */
.content { max-width: 1024px; margin: 1rem auto 2rem !important; padding: 0 1rem !important; }

/* People grid & cards */
.people-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1rem;
  max-width: 1024px;
  margin: 1rem auto 2rem;
  padding: 0 1rem;
}
.person { background: var(--card); padding: 1rem; border-radius: .8rem;
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent); text-align: center; }
.person img {
  width: 168px; height: 168px; /* uniform square headshots */
  object-fit: cover; border-radius: .6rem;
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
  display: block; margin: 0 auto;
}
.person .name { font-weight: 700; margin-top: .6rem; }
.person .role { color: var(--muted); font-size: .9rem; }

@media (max-width: 900px) { .people-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .people-grid { grid-template-columns: 1fr; } }

/* Team group photo: always centered at 30% of viewport width */
.team-photo {
  width: 30vw !important;
  max-width: 30vw !important;
  height: auto !important;
  display: block; margin: 1rem auto;
  border-radius: .6rem;
  border: 1px solid color-mix(in oklab, var(--text) 12%, transparent);
}

/* --- Page header flush-left fix --- */
.page-header {
  max-width: none !important;     /* full width of viewport */
  margin: 2rem 0 1rem !important; /* no horizontal centering */
  padding-left: 1rem !important;  /* align with nav/logo inset */
  padding-right: 0 !important;
}

.page-header h1 {
  margin-left: 0 !important;
  text-align: left !important;
}

.content {
  max-width: 1024px;
  margin: 1rem auto 2rem;
  padding: 0 1rem;
}

/* ---- NAV FIX: always show all links (including CV) ---- */
.site-header .site-nav{
  display:flex !important;
  flex-wrap:wrap !important;      /* let links wrap instead of disappearing */
  gap:.6rem;
  margin-left:auto;
  overflow:visible !important;     /* don't clip the last items */
  max-width:100%;
}

.site-header .site-nav a{
  display:inline-flex !important;
  white-space:nowrap;              /* keep each link on one token */
  padding:.35rem .6rem;            /* slightly tighter so everything fits */
}

/* If any media query hides late items, override it */
.site-header .site-nav a[href="/cv.html"]{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* The “Join Us” button can push items off-screen; keep it compact */
.site-header .site-nav .btn{
  padding:.35rem .6rem !important;
}

/* Brand layout */
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
}

/* JPEG logo sizing */
.site-header .brand .logo-image {
  display: inline-block;
  width: 28px;   /* tweak to taste */
  height: 28px;  /* keep square */
  object-fit: contain; /* preserve aspect */
  border-radius: 50%;   /* optional: circular crop */
  image-rendering: -webkit-optimize-contrast;
}

/* Slightly larger on wider screens */
@media (min-width: 768px) {
  .site-header .brand .logo-image { width: 32px; height: 32px; }
}

/* Optional: if your header has a dark background and the JPEG is dark,
   brighten it a touch in dark mode */
@media (prefers-color-scheme: dark) {
  .site-header .brand .logo-image {
    filter: brightness(1.1) contrast(1.05);
  }
}

/* === ERC right-hand info box (clean) === */
.erc-box{
  display:flex;justify-content:flex-end;padding:2rem 1rem;background:transparent;
}
.erc-box-container{
  max-width:360px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:1.5rem;text-align:center;color:#e0e0e0;
}
.erc-box-logo{filter:drop-shadow(0 0 6px rgba(255,255,255,.3));}
.erc-box-text{font-size:.9rem;color:#ccc;line-height:1.4;margin:.6rem 0 1rem;}
.erc-box-info{background:rgba(255,255,255,.03);border-radius:10px;padding:.8rem;}
.erc-box-info h3{margin:0 0 .3rem;font-size:1rem;color:#f47b20;}
.erc-box-info p{margin:0;font-size:.9rem;color:#e0e0e0;}
@media (max-width:768px){
  .erc-box{justify-content:center;}
  .erc-box-container{max-width:90%;}
}

/* === ERC Hero Box === */
.erc-hero-box {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  max-width: 360px;
  color: #eee;
  text-align: center;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

.erc-hero-logo {
  width: 300px;
  height: auto;
  display: block;
  margin: 0 auto 0.5rem auto;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.3));
}

.erc-hero-text p {
  font-size: 0.9rem;
  margin: 0.4rem 0;
  line-height: 1.3;
}

.erc-hero-text h3 {
  font-size: 1rem;
  color: #ff8c32;
  margin: 0.6rem 0 0.3rem;
}

@media (max-width: 768px) {
  .erc-hero-box {
    position: static;
    max-width: 90%;
    margin: 2rem auto 0 auto;
  }
  .erc-hero-logo {
    width: 200px;
  }
}