/* ════════════════════════════════════════════
   TEAM PAGE — FINAL CLEAN VERSION
   ════════════════════════════════════════════ */

/* ═══ REVEAL ═══ */
.reveal { opacity:0; transform:translateY(40px); transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.reveal.in-view { opacity:1; transform:translateY(0); }

/* ═══ GRID LAYOUTS ═══ */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; max-width:1200px; margin:0 auto; }
.grid-heads { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1200px; margin:0 auto; }
.grid-members { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1200px; margin:0 auto; }
.grid-impact { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1200px; margin:0 auto; }

/* ═══ FOUNDER CARDS ═══ */
.card-founder {
  background:var(--card); border:1px solid var(--border);
  position:relative; overflow:hidden;
  transition:border-color 0.5s, box-shadow 0.5s;
}
.card-founder:hover {
  border-color:rgba(212,168,67,0.25);
  box-shadow:0 24px 60px rgba(0,0,0,0.25), 0 0 40px rgba(212,168,67,0.04);
}
.cf-img { position:relative; overflow:hidden; aspect-ratio:4/3; }
.cf-img img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(0.8) contrast(1.08) saturate(0.85);
  transition:transform 1.4s var(--ease-expo), filter 0.6s;
}
.card-founder:hover .cf-img img { transform:scale(1.05); filter:brightness(0.9) contrast(1.05) saturate(1); }
.cf-img::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(5,5,5,0.65) 100%); pointer-events:none; }
.cf-shine {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, rgba(212,168,67,0.1) 50%, transparent 60%);
  transform:translateX(-100%);
}
.card-founder:hover .cf-shine { animation:shineSweep 0.8s ease-out forwards; }
@keyframes shineSweep { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

.cf-body { padding:28px 28px 32px; }
.cf-badge {
  display:inline-block; font-family:var(--font-accent); font-size:0.5rem; font-weight:600;
  letter-spacing:0.35em; text-transform:uppercase; color:var(--black); background:var(--gold);
  padding:5px 16px; margin-bottom:14px;
}
.cf-body h3 { font-family:var(--font-display); font-size:clamp(1.5rem,2.5vw,2.1rem); font-weight:300; color:var(--white); line-height:1.2; margin-bottom:14px; }
.cf-body h3 em { font-style:italic; font-weight:400; background:linear-gradient(135deg,var(--gold),var(--gold-bright)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.cf-body p { font-size:0.84rem; color:var(--muted); line-height:1.85; margin-bottom:14px; }
.cf-body blockquote { font-family:var(--font-display); font-size:0.92rem; font-style:italic; color:var(--text); line-height:1.65; padding-left:18px; border-left:2px solid rgba(212,168,67,0.35); opacity:0.8; margin:0; }
.card-edge { position:absolute; bottom:0; left:0; width:100%; height:3px; background:linear-gradient(90deg, var(--gold), var(--gold-bright), var(--gold)); transform:scaleX(0); transform-origin:left; transition:transform 0.8s var(--ease-expo); }
.card-founder:hover .card-edge { transform:scaleX(1); }

/* ═══ HEAD CARDS ═══ */
.card-head {
  background:var(--card); border:1px solid var(--border);
  position:relative; overflow:hidden;
  transition:border-color 0.5s, transform 0.5s var(--ease-expo), box-shadow 0.5s;
}
.card-head:hover {
  border-color:rgba(212,168,67,0.3);
  transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(0,0,0,0.3), 0 0 30px rgba(212,168,67,0.05);
}
.ch-img { position:relative; overflow:hidden; aspect-ratio:1/1; }
.ch-img img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(0.8) contrast(1.06) saturate(0.85);
  transition:transform 1.2s var(--ease-expo), filter 0.5s;
}
.card-head:hover .ch-img img { transform:scale(1.07); filter:brightness(0.9) contrast(1.05) saturate(1); }
.ch-img::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(5,5,5,0.6) 100%); }

.ch-body { padding:22px 22px 28px; }
.ch-dept {
  display:inline-block; font-family:var(--font-accent); font-size:0.45rem; font-weight:600;
  letter-spacing:0.3em; text-transform:uppercase; color:var(--black); background:var(--gold);
  padding:4px 12px; margin-bottom:12px;
}
.ch-body h4 { font-family:var(--font-display); font-size:1.25rem; font-weight:500; color:var(--white); margin-bottom:4px; }
.ch-role { font-family:var(--font-accent); font-size:0.48rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:10px; }
.ch-body p { font-size:0.78rem; color:var(--muted); line-height:1.75; }
.card-glow { position:absolute; top:0; left:0; width:100%; height:3px; background:var(--gold); transform:scaleX(0); transform-origin:center; transition:transform 0.7s var(--ease-expo); }
.card-head:hover .card-glow { transform:scaleX(1); }

/* ═══ MEMBER CARDS ═══ */
.card-member {
  background:var(--card); border:1px solid var(--border);
  overflow:hidden; position:relative;
  transition:border-color 0.5s, transform 0.5s var(--ease-expo);
}
.card-member:hover { border-color:rgba(212,168,67,0.2); transform:translateY(-6px); }

.cm-img { position:relative; overflow:hidden; aspect-ratio:1/1; }
.cm-img img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(0.8) contrast(1.05) saturate(0.85);
  transition:transform 1s var(--ease-expo), filter 0.5s;
}
.card-member:hover .cm-img img { transform:scale(1.06); filter:brightness(0.88) contrast(1.05) saturate(1); }
.cm-img::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(5,5,5,0.5) 100%); }

/* Placeholder initial for missing photos */
.cm-ph {
  width:100%; aspect-ratio:1/1;
  background:linear-gradient(135deg, var(--card), var(--deep));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:4rem; font-weight:300;
  color:rgba(212,168,67,0.1);
}
/* Hide placeholder if real img loads */
.cm-img img + .cm-ph { display:none; }

.cm-body { padding:20px 20px 24px; }
.cm-body h4 { font-family:var(--font-display); font-size:1.1rem; font-weight:500; color:var(--white); margin-bottom:4px; }
.cm-body span { font-family:var(--font-accent); font-size:0.46rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:10px; }
.cm-body p { font-size:0.76rem; color:var(--muted); line-height:1.75; }

.card-member::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform 0.6s var(--ease-expo); }
.card-member:hover::after { transform:scaleX(1); }

/* ═══ IMPACT ═══ */
.card-impact {
  background:var(--card); border:1px solid var(--border);
  padding:36px 20px; text-align:center;
  transition:border-color 0.4s, transform 0.4s var(--ease-expo);
}
.card-impact:hover { border-color:rgba(212,168,67,0.2); transform:translateY(-4px); }
.ci-val { font-family:var(--font-display); font-size:2.4rem; font-weight:300; background:linear-gradient(135deg,var(--gold),var(--gold-bright)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:8px; }
.ci-label { font-size:0.65rem; color:var(--muted); letter-spacing:0.12em; text-transform:uppercase; }

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */

/* Tablet */
@media(max-width:1024px) {
  .grid-heads { grid-template-columns:repeat(2,1fr); }
  .grid-members { grid-template-columns:repeat(2,1fr); }
  .grid-impact { grid-template-columns:repeat(2,1fr); }
}

/* Phone */
@media(max-width:768px) {
  .grid-2 { grid-template-columns:1fr; max-width:480px; }
  .grid-heads { grid-template-columns:repeat(2,1fr); gap:16px; }
  .grid-members { grid-template-columns:repeat(2,1fr); gap:16px; }
  .grid-impact { grid-template-columns:repeat(2,1fr); gap:16px; }
}

/* Small phone */
@media(max-width:480px) {
  .grid-heads { grid-template-columns:1fr; max-width:380px; margin:0 auto; }
  .grid-members { grid-template-columns:1fr; max-width:380px; margin:0 auto; }
  .grid-impact { grid-template-columns:1fr; }
  .cf-body h3 { font-size:1.4rem; }
}