/* --- 1. RESET & UNIFIED TYPOGRAPHY --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body, html {
    width: 100%; height: 100%;
    background-color: #000; font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #fff; scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

h2 { 
    font-size: 2rem; 
    letter-spacing: 5px; 
    text-transform: uppercase; 
    margin-bottom: 30px;
}

.description, .lead, .manifesto { 
    font-size: 1rem; 
    line-height: 1.8; 
    color: #888; 
}

.manifesto {
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 20px;
}

/* Core Container for About/Team */
.content-section { 
    padding: 120px 5%; 
    max-width: 1600px; 
    margin: 0 auto; 
}

/* --- 2. HERO CAROUSEL --- */
.hero { height: 100vh; width: 100%; position: relative; overflow: hidden; background: #0a0a0a; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.5s; z-index: 1; }
.slide.active { opacity: 1; z-index: 2; }
.slide img { 
    width: 100%; height: 100%; 
    object-fit: cover; /* Crucial for external images */
    filter: grayscale(100%); 
    transition: 0.8s ease; 
}
.hero:hover .slide.active img { filter: grayscale(0%); transform: scale(1.02); }

/* --- 3. ABOUT SECTION --- */
.about-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 100px;
    align-items: start;
}

.about-stats {
    display: flex;
    flex-direction: column; 
    gap: 40px;
    padding-left: 60px;
    border-left: 1px solid #111;
}

.stat-number { display: block; font-size: 4rem; font-weight: 700; color: #1a1a1a; transition: 0.4s; }
.stat-box:hover .stat-number { color: #fff; }
.stat-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 3px; color: #555; }

.discipline-tags {
    grid-column: 1 / -1; 
    display: flex;
    justify-content: center; 
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 80px;
}

.tag-btn {
    text-decoration: none; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px;
    padding: 15px 30px; border: 1px solid #222; color: #444; transition: 0.3s;
}
.tag-btn:hover { border-color: #fff; color: #fff; background: #080808; }

.section-divider { width: 100%; max-width: 1600px; margin: 60px auto; border-bottom: 1px solid #111; }

/* --- 4. TEAM SECTION --- */
.team-intro-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; margin-bottom: 80px; }
.team-hero { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }

.team-grid { 
    display: grid; 
    grid-template-columns: repeat(8, 1fr); 
    gap: 20px; 
    border-top: 1px solid #111; 
    padding-top: 60px; 
}

/* Stable frames for external photos */
.member-img-large { width: 100%; aspect-ratio: 3/4; overflow: hidden; background: #0a0a0a; }
.member-img { width: 100%; aspect-ratio: 1/1; overflow: hidden; background: #0a0a0a; }

.member img { 
    width: 100%; height: 100%; 
    object-fit: cover; 
    filter: grayscale(100%); 
    transition: 0.5s; 
}
.member:hover img { filter: grayscale(0%); }

.member-info h3 { font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; margin-top: 12px; }
.member-title { font-size: 0.6rem; color: #555; text-transform: uppercase; letter-spacing: 1px; }

/* --- 5. CONTACT SECTION (Edge-to-Edge) --- */
#contact { width: 100%; border-top: 1px solid #111; margin-top: 100px; }
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 600px;
}
.contact-info {
    padding: 100px 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.map-container { width: 100%; height: 100%; filter: grayscale(1) invert(0.9); background: #0a0a0a; }
.map-container iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- 6. FOOTER --- */
.main-footer { padding: 100px 5% 40px; border-top: 1px solid #111; background: #000; }
.footer-grid { 
    display: grid; 
    grid-template-columns: 2fr 1fr 1fr 1fr; 
    gap: 60px; 
    max-width: 1600px; 
    margin: 0 auto; 
}
.footer-logo { font-size: 1.4rem; letter-spacing: 5px; font-weight: bold; color: #fff; text-decoration: none; margin-bottom: 25px; display: block; }
.footer-col h4 { font-size: 0.65rem; color: #fff; letter-spacing: 3px; margin-bottom: 25px; text-transform: uppercase; opacity: 0.5; }
.footer-col a, .footer-col span { color: #555; text-decoration: none; display: block; margin-bottom: 12px; font-size: 0.8rem; letter-spacing: 1px; }
.footer-col a:hover { color: #fff; }
.footer-bottom { 
    max-width: 1600px; margin: 80px auto 0; 
    padding-top: 40px; border-top: 1px solid #111; 
    font-size: 0.6rem; color: #333; letter-spacing: 2px; text-transform: uppercase;
}

/* --- 7. HEADER & NAV --- */
#main-header.header { position: fixed; top: 0; left: 0; width: 100%; padding: 40px 5%; z-index: 9999; display: flex; justify-content: space-between; align-items: center; transition: 0.4s; }
#main-header.shrunk { padding: 20px 5%; background: rgba(0,0,0,0.9); backdrop-filter: blur(10px); border-bottom: 1px solid #111; }
.logo { font-size: 1.2rem; letter-spacing: 0.5rem; font-weight: 700; text-transform: uppercase; text-decoration: none; color: #fff; }

.menu-toggle { cursor: pointer; z-index: 10001; }
.bar { width: 25px; height: 1px; background-color: #fff; margin: 6px 0; transition: 0.3s; }

.nav-overlay { 
    position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; 
    background: #000; display: flex; flex-direction: column; 
    justify-content: center; align-items: center; transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1); 
    z-index: 10000; 
}
.nav-overlay.active { right: 0; }
.nav-overlay a { color: #fff; text-decoration: none; font-size: 2.5rem; margin: 15px; letter-spacing: 10px; text-transform: uppercase; font-weight: 200; transition: 0.3s; }
.nav-overlay a:hover { opacity: 0.5; padding-left: 20px; }

/* --- 8. RESPONSIVE --- */
@media (max-width: 1100px) {
    .about-grid, .team-intro-grid { grid-template-columns: 1fr; gap: 60px; }
    .about-stats { border-left: none; padding-left: 0; flex-direction: row; justify-content: space-between; }
    .team-grid { grid-template-columns: repeat(4, 1fr); }
    .contact-layout { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr; }
    .stat-number { font-size: 2.5rem; }
    .logo { font-size: 1rem; letter-spacing: 0.3rem; }
}