:root{
  --bg:#0b0b0d;
  --bg-2:#111114;
  --panel:#151518;
  --ink:#f3f3f3;
  --muted:#c8c8c8;
  --accent:#e51016;
  --accent-2:#b40d12;
  --ring:#2b2b2f;
  --radius:16px;
  --max:1100px;
}

*{box-sizing:border-box}
html{
  color-scheme:dark;
  /* mirror the body background so it shows during rubber-band overscroll */
  background:
    radial-gradient(1200px 800px at 10% -10%,
      rgba(229,16,22,1) 0%,
      rgba(229,16,22,1) 30%,
      var(--bg) 55%) fixed,
    var(--bg);
}

html,body{
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior:contain; /* tames scroll chaining in the bounce area */
}


body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 10% -10%,
      rgba(229,16,22,1) 0%,
      rgba(229,16,22,1) 30%,
      var(--bg) 55%) fixed,
    var(--bg);
  color:var(--ink);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,"Noto Sans";
  line-height:1.55;
  -webkit-text-size-adjust:100%;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1200px 800px at 10% -10%,
      rgba(229,16,22,1) 0%,
      rgba(229,16,22,1) 30%,
      var(--bg) 55%) fixed,
    var(--bg);
}

img,svg,video{max-width:100%;height:auto;display:block}

.container{width:min(100%,var(--max));margin-inline:auto;padding:0 1rem}
.section{padding:4rem 0}
.muted{color:var(--muted)}
.bullets{padding-left:1.25rem}

a{color:var(--accent);text-decoration:none}
a:hover{opacity:.9;text-decoration:underline}

/* prevent underline on nav links & buttons */
.nav a:hover,
.btn:hover,
.btn:focus-visible{ text-decoration:none }

/* ===== HEADER (GRID LAYOUT): left logo + right nav ===== */
.site-header{
  position:sticky; top:0; z-index:10;
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  backdrop-filter:saturate(140%) blur(8px);
  background:rgba(15,15,18,.65);
  border-bottom:1px solid var(--ring);

  display:grid;
  grid-template-columns:max-content 1fr;
  align-items:center;
  gap:.75rem;
  padding:.75rem clamp(.75rem, 4vw, 1rem);
  padding-top: calc(.75rem + env(safe-area-inset-top)); /* extra comfy under iOS notch */
}

/* Logo */
.brand{
  position:static;
  transform:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; box-shadow:none; padding:0; border-radius:0;
}
.brand img{ height:42px; width:auto }

/* Nav */
.nav{
  display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; width:100%;
  min-width:0;
}

/* Mobile header behavior */
@media (max-width:560px){
  .brand img{ height:34px }
  .site-header{ gap:.5rem; padding:.6rem clamp(.6rem, 4vw, 1rem) }
  .nav{
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none; -ms-overflow-style:none;
    padding-bottom:.2rem;
  }
  .nav::-webkit-scrollbar{display:none}
}

/* Nav pills */
.nav a{
  --btn-bg: rgba(255,255,255,.03);
  --btn-border: var(--ring);
  --btn-shadow: 0 8px 18px rgba(0,0,0,.35);
  display:inline-block;
  padding:.48rem .85rem;
  border-radius:999px;
  background:linear-gradient(180deg, var(--btn-bg), rgba(255,255,255,.015));
  border:1px solid var(--btn-border);
  box-shadow: var(--btn-shadow), inset 0 0 0 1px rgba(255,255,255,.02);
  color:var(--accent);
  white-space:nowrap;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .06s ease, color .2s ease;
}
.nav a:hover,
.nav a:focus-visible{
  background:linear-gradient(180deg, rgba(229,16,22,.18), rgba(229,16,22,.08));
  border-color:#3a2a2b;
  color:var(--accent);
  outline:none;
}
.nav a:active{ transform:translateY(1px) }
.nav a[aria-current="page"]{
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#fff; border-color:transparent;
  box-shadow:0 10px 22px rgba(229,16,22,.28), inset 0 0 0 1px rgba(255,255,255,.06);
}

/* ===== HERO ===== */
.hero{padding:5rem 0 2rem}
.hero-title{font-size:clamp(2rem,7vw,4rem);margin:0 0 .25rem;letter-spacing:.02em}
.hero-sub{margin:.25rem 0 1rem;font-size:1.05rem;color:var(--ink)}
.hero-tag{max-width:70ch;color:var(--muted)}
.hero-cta{display:flex;gap:.75rem;margin:1.25rem 0 2rem;flex-wrap:wrap}

/* Buttons */
.btn{
  display:inline-block;padding:.75rem 1rem;border-radius:12px;border:1px solid var(--ring);
  background:transparent;color:var(--ink);
  transition:background .2s ease, transform .06s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:hover,.btn:focus-visible{ background:rgba(255,255,255,.06); border-color:#3a3a3f }
.btn:active{ transform:translateY(1px) }
.btn-primary{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-color:transparent; color:#fff }
.btn-outline{ background:transparent }

/* ===== CARDS ===== */
.cards{
  display:grid;gap:1rem;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  border:1px solid var(--ring);border-radius:var(--radius);padding:1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  min-width:0;
}
.card-spot{
  height:120px;border-radius:12px;
  background:repeating-linear-gradient(45deg,#101014,#101014 10px,#0e0e11 10px,#0e0e11 20px);
  border:1px dashed #2a2a2e;margin-bottom:.75rem
}

/* ===== SPLIT / FIGURE ===== */
.split{display:grid;gap:2rem;grid-template-columns:1.2fr .8fr}
.figure{margin:0;background:transparent;border:1px solid var(--ring);border-radius:12px;padding:.5rem}
.figure img{width:100%;height:auto;border-radius:8px}

/* ===== TEAM GRID ===== */
.team-grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1rem;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.member{
  text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  border:1px solid var(--ring);
  border-radius:16px;
  padding:1rem;
  min-width:0;
}
.member img{
  width:min(200px, 70vw);
  height:min(200px, 70vw);
  object-fit:cover;border-radius:50%;
  border:2px solid #2a2a2e;background:#0f0f12;
  display:block; margin-inline:auto; /* center the headshot */
}
.role{color:var(--muted);margin:.25rem 0 .5rem}

/* Social icon row under each member */
.socials{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;   /* center the icons in the card */
  margin:4px 0 10px;
}

/* Icon links */
.icon{
  display:inline-flex;
  width:24px; height:24px;
  border-radius:50%;
  align-items:center; justify-content:center;
  text-decoration:none;
  transition: transform 120ms ease, opacity 120ms ease;
}
.icon svg{ width:100%; height:100%; display:block }

/* Brand fills */
.icon.linkedin svg path{ fill:#0A66C2 }   /* LinkedIn */
.icon.github   svg path{ fill:#f3f3f3 }   /* GitHub on dark bg */

/* Hover/focus feedback */
.icon:hover{ transform:translateY(-1px) }
.icon:active{ transform:translateY(0) }
.icon:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* keep buttons centered inside cards */
.member .btn{ display:inline-block }

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

/* ===== RESPONSIVE ===== */
@media (max-width:1100px){
  .section{padding:3.5rem 0}
}

@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:740px){
  .hero{padding:3.5rem 0 1.5rem}
  .hero-title{font-size:clamp(1.8rem,7.2vw,2.4rem)}
  .hero-sub{font-size:1rem}
  .cards{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .member{padding:.85rem}
  .member img{
    width:min(170px, 60vw);
    height:min(170px, 60vw);
  }
}

@media (max-width:520px){
  .section{padding:3rem 0}
  .team-grid{grid-template-columns:1fr}
  .member img{
    width:min(150px, 70vw);
    height:min(150px, 70vw);
  }
}

/* Home page: underline regular text links (but not nav/hero buttons) */
.home a:not(.btn):not(.nav a){text-decoration:underline;text-underline-offset:3px}

/* Header “scrolled” state + top progress bar */
.site-header.scrolled{
  background:rgba(15,15,18,.82);
  border-bottom-color:#3a3a3f;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* thin progress bar anchored to header */
.scroll-progress{
  position:absolute;
  left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform-origin:left;
  /* use width via custom property for crispness */
  width:var(--progress, 0%);
  transition:width .08s linear;
}

/* Reveal animations (progressive; JS disables for reduced-motion) */
.reveal{
  opacity:0;
  transform: translateY(16px) scale(.98);
  will-change: transform, opacity;
}
.reveal.reveal-in{
  opacity:1;
  transform:none;
  transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
}

/* Button ripple (contained) */
.btn{ position:relative; overflow:hidden }
.ripple{
  position:absolute;
  border-radius:50%;
  transform: scale(0);
  background: rgba(255,255,255,.25);
  animation: ripple .6s ease-out forwards;
  pointer-events:none;
}
@keyframes ripple{
  to { transform: scale(1); opacity: 0; }
}

/* Toast (with screen-reader-only helper) */
.toast{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  padding: .5rem .75rem;
  border-radius: 10px;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: .9rem;
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
  backdrop-filter: blur(6px) saturate(120%);
  border: 1px solid var(--ring);
  z-index: 50;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}