@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Inter:wght@400;600;700&display=swap');

/* =========================
   THEME + RESET
   ========================= */
:root {
  --space-1:#060216;
  --space-2:#0b0624;
  --space-3:#14073b;

  --ink:#f9f8ff;
  --muted:#c7c6ff;

  --accent:#72ff9b;
  --accent-2:#7b3cff;

  --border:rgba(255,255,255,0.14);
  --panel:linear-gradient(145deg,rgba(12,5,46,.95),rgba(19,10,56,.97));
}

*{margin:0;padding:0;box-sizing:border-box}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit}

body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 80% -10%,#2a1466 0%,transparent 60%),
    radial-gradient(1000px 700px at 10% 110%,#3a0ca3 0%,transparent 60%),
    var(--space-1);
  line-height:1.6;
  overflow-x:hidden;
}

.container{max-width:1120px;margin:0 auto;padding:0 1.2rem}

/* =========================
   HEADER + NAV (DESKTOP)
   ========================= */
.site-header{
  position:sticky;top:0;z-index:80;
  backdrop-filter:blur(12px);
  background:linear-gradient(to right,rgba(6,2,21,.90),rgba(18,7,56,.90));
  border-bottom:1px solid var(--border);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.6rem 0;
}

.brand{display:flex;align-items:center;gap:.6rem;min-width:0}
.brand img{
  width:44px;height:44px;border-radius:50%;
  background:#fff;border:2px solid var(--accent);
  box-shadow:0 0 14px rgba(114,255,155,.6)
}
.brand .name{
  font-family:"Bangers";
  letter-spacing:.14em;
  font-size:.95rem;
  white-space:nowrap;
}

.nav-links{
  display:flex;
  gap:1rem;
  font-size:.92rem;
  align-items:center;
}
.nav-links a{opacity:.85;font-weight:700}
.nav-links a:hover{opacity:1;color:var(--accent)}

/* =========================
   MOBILE NAV (ONE SYSTEM ONLY)
   ========================= */
/* Hamburger button (3 lines) */
.nav-toggle{
  display:none;
  margin-left:auto;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(10,6,30,0.55);
  backdrop-filter:blur(10px);
  border-radius:14px;
  width:48px;height:44px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(0,0,0,0.35);
}

.nav-toggle .bars{
  width:20px;height:14px;position:relative;
}
.nav-toggle .bars span{
  position:absolute;left:0;right:0;
  height:2px;border-radius:2px;
  background:rgba(255,255,255,0.9);
}
.nav-toggle .bars span:nth-child(1){top:0}
.nav-toggle .bars span:nth-child(2){top:6px;opacity:.9}
.nav-toggle .bars span:nth-child(3){top:12px;opacity:.8}

/* Hide desktop link row on phones */
@media (max-width: 900px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .brand img{width:38px;height:38px}
  .brand .name{font-size:.85rem;letter-spacing:.12em}
}

/* Overlay + drawer */
.mobile-nav-overlay{
  position:fixed;inset:0;
  z-index:200;
  background:rgba(0,0,0,0.55);
  opacity:0;
  pointer-events:none;
  transition:opacity 160ms ease-out;
}

.mobile-nav{
  position:fixed;
  top:0;right:0;
  height:100%;
  width:min(92vw, 420px);
  z-index:201;

  background:linear-gradient(to bottom, rgba(6,2,21,0.96), rgba(18,7,56,0.96));
  backdrop-filter:blur(14px);
  border-left:1px solid rgba(255,255,255,0.10);
  transform:translateX(104%);
  transition:transform 200ms ease-out;

  padding:1.1rem 1rem 1.2rem;
  overflow:auto;
}

body.menu-open{overflow:hidden}
body.menu-open .mobile-nav-overlay{
  opacity:1;
  pointer-events:auto;
}
body.menu-open .mobile-nav{
  transform:translateX(0);
}

.mobile-nav-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  padding-bottom:.8rem;
  border-bottom:1px solid rgba(255,255,255,0.10);
  margin-bottom:1rem;
}

.mobile-nav-title{
  font-family:"Bangers";
  letter-spacing:.16em;
  font-size:1.1rem;
  text-transform:uppercase;
}

.mobile-nav-close {
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);

  width: 44px;
  height: 44px;
  border-radius: 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 1.6rem;
  line-height: 1;
  font-weight: 700;
  color: var(--ink);

  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

.mobile-nav-close:hover {
  background: rgba(255,255,255,0.14);
}


.mobile-nav-links{
  display:grid;
  gap:.9rem;
  padding:.2rem 0 1rem;
}

.mobile-nav-links a{
  display:block;
  padding:1.05rem 1.05rem;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.05);
  box-shadow:0 16px 34px rgba(0,0,0,0.35);
  font-weight:800;
  font-size:1.05rem;
}

/* =========================
   GENERIC UI
   ========================= */
section{padding:2.6rem 0}

.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:1.1rem;
  padding:1.8rem 1.9rem 2rem;
  box-shadow:0 18px 40px rgba(0,0,0,.6);
}

.muted{color:var(--muted);font-size:.92rem}

.info-label{
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.18rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.75rem 1.6rem;
  border-radius:999px;
  font-weight:800;
  border:1px solid transparent;
  cursor:pointer;
  transition:.12s ease-out;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,#72ff9b,#7b3cff);
  color:#060215;
  box-shadow:0 10px 26px rgba(114,255,155,.4),0 0 60px rgba(123,60,255,.25) inset;
}
.btn-ghost{
  border-color:rgba(255,255,255,.6);
  color:var(--ink);
}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-small{padding:.55rem 1.1rem;font-size:.9rem}

.pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .6rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.06);
  font-size:.82rem;
  color:var(--muted);
}

/* =========================
   HOME HERO + PLANET
   ========================= */
.hero{position:relative;overflow:hidden}
.hero--center{
  min-height:90vh;
  padding:7rem 0 8rem;
  display:grid;
  place-items:center;
}

.stars-canvas{
  position:fixed;top:0;left:0;right:0;bottom:0;
  width:100%;height:100vh;
  z-index:-1;
  pointer-events:none;
  opacity:.9;
}

.planet-bg{
  position:absolute;inset:0;
  display:grid;place-items:center;
  z-index:1;
  pointer-events:none;
}

.planet{
  width:clamp(340px,46vw,680px);
  aspect-ratio:1/1;
  border-radius:50%;
  position:relative;
  isolation:isolate;

  background:radial-gradient(circle at 40% 35%,
    rgba(207,200,255,.42) 0%,
    rgba(128,102,255,.28) 45%,
    rgba(60,30,120,.06) 75%,
    transparent 100%);

  box-shadow:0 0 22px rgba(130,60,255,.12);
  animation:float 9s ease-in-out infinite;
}

.planet::after{
  content:"";
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(30,20,60,.18),
    rgba(255,255,255,0) 25%,
    rgba(30,20,60,.15) 50%,
    rgba(255,255,255,0) 75%,
    rgba(30,20,60,.18) 100%);
  mix-blend-mode:soft-light;
  animation:spin 60s linear infinite;
}

.ring{position:absolute;inset:-8%;border-radius:50%;opacity:.9;
  filter:blur(1.4px) drop-shadow(0 0 26px rgba(123,60,255,.4))}
.r1{background:radial-gradient(closest-side,rgba(255,213,74,.78),transparent 70%)}
.r2{background:radial-gradient(closest-side,rgba(255,138,0,.7),transparent 70%)}
.r3{background:radial-gradient(closest-side,rgba(123,60,255,.68),transparent 70%)}

.hero-inner{position:relative;z-index:2;text-align:center}
.hero-inner h1{
  font-family:"Bangers";
  font-size:clamp(2.6rem,5vw,4rem);
  letter-spacing:.12em;
}
.hero-sub{
  margin-top:.45rem;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  font-size:.9rem;
}
.btn-row{
  margin-top:1.6rem;
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  justify-content:center;
}

/* Dunker silhouette (only on home if you add class="home" on body) */
.home .hero::after{
  content:"";
  position:absolute;
  top:46%;
  left:49%;
  width:320px;
  height:320px;
  transform:translate(-50%,-50%) rotate(-10deg);
  background-image:url("dunker.png");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  opacity:.18;
  pointer-events:none;
  z-index:2;
  filter:drop-shadow(0 0 12px rgba(255,255,255,0.15));
  animation:dunkerPulse 5s ease-in-out infinite;
}

/* =========================
   DETAILS ROW
   ========================= */
.details-simple{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}

/* =========================
   COUNTDOWN FLIP
   ========================= */
.countdown-section{
  margin-top:-2.5rem;
  padding:0 0 2.5rem;
  position:relative;
  z-index:5;
}

.countdown-title{
  text-align:center;
  font-family:"Bangers";
  letter-spacing:0.16em;
  font-size:1.3rem;
  text-transform:uppercase;
  margin-bottom:1.5rem;
  color:var(--muted);
}

.flip-countdown{
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}
.flip-unit{text-align:center}
.flip-label{
  display:block;
  margin-top:0.5rem;
  font-size:0.7rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
}

.flip-card{
  perspective:1000px;
  width:120px;
  height:90px;
  border-radius:18px;
  background:radial-gradient(circle at top, rgba(255,255,255,0.18), rgba(6,2,22,0.9));
  box-shadow:0 18px 35px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.06);
  overflow:hidden;
  position:relative;
}
.flip-inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform 0.6s ease-out;
}
.flip-front,.flip-back{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Bangers";
  font-size:2.5rem;
  letter-spacing:0.08em;
  color:#f9f9ff;
  backface-visibility:hidden;
}
.flip-front::after,.flip-back::after{
  content:"";
  position:absolute;
  left:0;right:0;top:50%;
  height:1px;
  background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.35), rgba(255,255,255,0));
  opacity:0.6;
}
.flip-back{transform:rotateX(180deg)}
.flip-card.is-flipping .flip-inner{transform:rotateX(-180deg)}

/* =========================
   HISTORY TIMELINE + GALLERY
   ========================= */
.history-hero{padding:5rem 0 2rem}
.history-hero h1{
  font-family:"Bangers";
  font-size:clamp(2.4rem,4vw,3.2rem);
  letter-spacing:0.16em;
  text-transform:uppercase;
  text-align:center;
}
.history-tagline{
  margin-top:0.6rem;
  text-align:center;
  color:var(--muted);
  font-size:0.95rem;
}

.timeline-section{padding:1rem 0 4rem}
.timeline{position:relative;max-width:860px}
.timeline::before{
  content:"";
  position:absolute;top:0;bottom:0;left:50%;
  width:3px;transform:translateX(-50%);
  background:linear-gradient(to bottom,
    rgba(123,60,255,0.0),
    rgba(123,60,255,0.65),
    rgba(114,255,155,0.8),
    rgba(123,60,255,0.0));
  opacity:0.85;
}
.timeline-item{
  position:relative;
  display:flex;
  margin:2.8rem 0;
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.7s ease-out, transform 0.7s ease-out;
}
.timeline-item.timeline-visible{opacity:1;transform:translateY(0)}
.timeline-item:nth-child(odd){justify-content:flex-start}
.timeline-item:nth-child(even){justify-content:flex-end}

.timeline-dot{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle, #72ff9b 0%, #7b3cff 75%);
  box-shadow:0 0 18px rgba(123,60,255,0.9);
}
.timeline-card{
  position:relative;
  max-width:340px;
  padding:1.3rem 1.4rem 1.2rem;
  border-radius:1rem;
  background:radial-gradient(circle at top left, rgba(255,255,255,0.12), rgba(6,2,22,0.96));
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 18px 35px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04);
}
.timeline-item:nth-child(odd) .timeline-card{margin-left:3.5rem}
.timeline-item:nth-child(even) .timeline-card{margin-right:3.5rem}

.timeline-year{
  font-family:"Bangers";
  letter-spacing:0.16em;
  font-size:0.9rem;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:0.35rem;
}
.timeline-title{font-weight:800;margin-bottom:0.35rem}
.timeline-text{color:var(--muted);font-size:0.9rem}

.history-gallery{padding:4rem 0;text-align:center}
.gallery-grid{
  margin-top:1.2rem;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:.8rem;
}
.gallery-item{
  border-radius:1rem;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 18px 35px rgba(0,0,0,0.45);
}
.gallery-item img{width:100%;height:220px;object-fit:cover}

/* =========================
   VISITOR INFO PAGE
   ========================= */
.visitor-hero{padding:4.5rem 0 1.8rem}
.visitor-title{
  font-family:"Bangers";
  font-size:clamp(2.4rem, 4vw, 3.2rem);
  letter-spacing:0.16em;
  text-transform:uppercase;
  text-align:center;
}
.visitor-tagline{
  margin-top:0.65rem;
  text-align:center;
  color:var(--muted);
  font-size:0.95rem;
}

.visitor-tiles{
  margin-top:2rem;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem;
}

.tile{
  border-radius:1rem;
  padding:1.15rem 1.1rem;
  background:radial-gradient(circle at top left, rgba(255,255,255,0.12), rgba(6,2,22,0.96));
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 18px 35px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
  transition:transform .12s ease-out, border-color .12s ease-out;
}
.tile:hover{transform:translateY(-2px);border-color:rgba(114,255,155,0.25)}
.tile-kicker{
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.tile-title{margin-top:.25rem;font-weight:900}
.tile-sub{margin-top:.25rem;color:var(--muted);font-size:0.9rem}

/* Sticky visitor section nav */
.section-nav{
  position:sticky;
  top:64px;
  z-index:30;
  background:rgba(6,2,22,0.65);
  border-bottom:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(10px);
}
.section-nav-inner{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  padding:.75rem 0;
  -webkit-overflow-scrolling:touch;
}
.section-nav a{
  white-space:nowrap;
  font-weight:800;
  opacity:.85;
}
.section-nav a:hover{opacity:1;color:var(--accent)}

.section-pad{padding:2.2rem 0}
.section-head{display:grid;gap:.35rem;margin-bottom:1.1rem}

.itinerary-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  flex-wrap:wrap;
  margin-bottom:1.2rem;
}

.itinerary-preview{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.9rem;
}
.it-preview-card{
  border-radius:.9rem;
  padding:1rem;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.05);
}
.it-preview-top{
  display:flex;
  justify-content:space-between;
  gap:.8rem;
  margin-bottom:.5rem;
}
.it-time{font-weight:900}
.it-day{color:var(--muted);font-size:.85rem}
.it-title{font-weight:900;margin-bottom:.25rem}

/* Resources */
.resource-toolbar{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}
.input,.select{
  width:min(420px, 100%);
  padding:.75rem .9rem;
  border-radius:.9rem;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.25);
  color:var(--ink);
  outline:none;
}
.select{width:220px}

.resource-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.9rem;
}
.resource-card{
  border-radius:.9rem;
  padding:1rem;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.05);
}
.resource-title{font-weight:900}
.resource-where{margin-top:.2rem;font-size:.9rem}
.resource-details{margin-top:.45rem;font-size:.92rem}

/* Food */
.food-grid{display:grid;gap:1.2rem}
.food-group-title{font-weight:900;margin-bottom:.7rem}
.food-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.9rem;
}
.food-card{
  border-radius:.9rem;
  padding:1rem;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.05);
}
.food-name{font-weight:900}
.food-link{margin-top:.55rem;color:var(--accent);font-weight:900}

/* Superstores */
.superstore-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.9rem;
}
.superstore-card{
  border-radius:.9rem;
  padding:1rem;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.05);
}
.superstore-name{font-weight:900;margin-bottom:.2rem}

/* Contacts */
.contacts-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.9rem;
}
.contact-card{
  border-radius:.9rem;
  padding:1rem;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.05);
}
.contact-role{font-weight:900;color:var(--accent);margin-bottom:.25rem}
.contact-name{font-weight:800}

/* Benefit card */
.benefit-card{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:1rem;
  align-items:center;
  border-radius:.9rem;
  padding:1rem;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.05);
}

/* =========================
   BOARD (COMMITTEES) + TEAMS
   ========================= */
.page-hero{padding:4.8rem 0 1.2rem;text-align:center}
.page-hero h1{
  font-family:"Bangers";
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:clamp(2.2rem, 4.2vw, 3.2rem);
}
.page-hero p{
  margin-top:.6rem;
  color:var(--muted);
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
}

.committee{margin-top:1.8rem}
.committee-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}
.committee-head h2{
  font-family:"Bangers";
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:1.35rem;
}
.card-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1rem;
}

.person-card, .team-card{
  border-radius:1.2rem;
  border:1px solid rgba(255,255,255,0.10);
  background:radial-gradient(circle at top left, rgba(255,255,255,0.12), rgba(6,2,22,0.96));
  box-shadow:0 18px 35px rgba(0,0,0,0.55);
  overflow:hidden;
}

.person-photo{
  aspect-ratio:1/1;
  width:100%;
  background:rgba(255,255,255,0.06);
}
.person-photo img{
  width:100%;height:100%;
  object-fit:cover;
}
.person-meta{padding:1rem 1rem 1.1rem;text-align:center}
.person-name{font-weight:900;font-size:1.05rem}
.person-role{color:var(--muted);margin-top:.25rem;font-size:.92rem}

/* Teams (Fusion / Bhangra lists can reuse this) */
.team-card{
  display:flex;
  gap:1rem;
  align-items:stretch;
}
.team-photo{
  width:120px;
  flex:0 0 auto;
  background:rgba(255,255,255,0.06);
}
.team-photo img{
  width:100%;height:100%;
  object-fit:cover;
}
.team-meta{padding:1rem 1rem 1.1rem;min-width:0}
.team-name{font-weight:900;font-size:1.15rem;line-height:1.2}
.team-school{color:var(--muted);margin-top:.25rem}

/* =========================
   FOOTER
   ========================= */
footer{
  border-top:1px solid var(--border);
  background:linear-gradient(#09041f,#040212);
}
.foot{
  padding:1.2rem 0 1.6rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  font-size:.9rem;
}
.foot .nav-links{display:flex;gap:.9rem}
.foot .nav-links a{opacity:.85}
.foot .nav-links a:hover{opacity:1;color:var(--accent)}

/* =========================
   RESPONSIVE
   ========================= */
@media(max-width: 900px){
  .visitor-tiles{grid-template-columns:1fr 1fr}
  .itinerary-preview{grid-template-columns:1fr}
  .resource-grid{grid-template-columns:1fr}
  .food-cards{grid-template-columns:1fr}
  .contacts-grid{grid-template-columns:1fr}
  .superstore-grid{grid-template-columns:1fr}
  .benefit-card{grid-template-columns:1fr}
  .card-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}

@media(max-width: 720px){
  .hero--center{min-height:75vh;padding:6rem 0 7rem}
  .details-simple{grid-template-columns:1fr}

  .visitor-hero{padding:3.6rem 0 1.2rem}
  .visitor-tiles{grid-template-columns:1fr}

  .section-nav{top:56px}
  .section-nav-inner{gap:.6rem}
  .section-nav a{
    padding:.35rem .6rem;
    border-radius:999px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.08);
  }

  .timeline::before{left:12px;transform:none}
  .timeline-dot{left:12px;transform:translateY(-50%)}
  .timeline-item,
  .timeline-item:nth-child(even),
  .timeline-item:nth-child(odd){justify-content:flex-start}
  .timeline-card{
    margin-left:2.8rem !important;
    margin-right:0 !important;
    max-width:100%;
  }

  .gallery-grid{grid-template-columns:1fr}

  .team-card{flex-direction:row}
  .team-photo{width:110px}
}

@media(max-width: 520px){
  .card-grid{grid-template-columns:1fr}
  .team-card{flex-direction:column}
  .team-photo{width:100%;height:220px}
  .team-photo img{height:220px}
}

/* =========================
   ANIMATIONS
   ========================= */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dunkerPulse{
  0%,100%{opacity:.15;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}
  50%{opacity:.40;transform:translate(-50%,-50%) rotate(-8deg) scale(1.1)}
}

/* ============================================================
   MOBILE NAV — FORCE BY ID (fixes “inline links / not a drawer”)
   Put this at the END of styles.css so it overrides earlier rules.
   ============================================================ */

#mobileNav[hidden],
#navBackdrop[hidden] {
  display: none !important;
}

#navBackdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

#mobileNav {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(92vw, 420px);
  z-index: 9999;

  background: linear-gradient(to bottom, rgba(6,2,21,0.96), rgba(18,7,56,0.96));
  backdrop-filter: blur(14px);
  border-left: 1px solid rgba(255,255,255,0.10);

  transform: translateX(104%);
  transition: transform 220ms ease;
  padding: 1.1rem 1rem 1.2rem;
  overflow-y: auto;
}

/* JS toggles body.menu-open */
body.menu-open #navBackdrop {
  opacity: 1;
  pointer-events: auto;
}

body.menu-open #mobileNav {
  transform: translateX(0);
}

/* Make links stack vertically no matter what container they are in */
#mobileNav a {
  display: block;
  padding: 1.05rem 1.05rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 16px 34px rgba(0,0,0,0.35);
  font-weight: 800;
  font-size: 1.05rem;
}

#mobileNav a + a {
  margin-top: .9rem;
}


/* FORCE close button styling (wins over everything) */
#navClose {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(10px) !important;

  color: var(--ink) !important;
  font-size: 1.6rem !important;
  line-height: 1 !important;
  font-weight: 700 !important;

  cursor: pointer !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35) !important;
}

#navClose:hover {
  background: rgba(255,255,255,0.14) !important;
}
/* Close (X) button — matches your HTML: .nav-drawer-close */
.nav-drawer-close {
  width: 44px;
  height: 44px;
  border-radius: 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);

  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 700;

  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

.nav-drawer-close:hover {
  background: rgba(255,255,255,0.14);
}
.nav-drawer-close {
  -webkit-appearance: none;
  appearance: none;
}
/* ============================================================
   HARD STOP: never show mobile drawer/backdrop on desktop
   ============================================================ */
@media (min-width: 901px){
  #mobileNav,
  #navBackdrop{
    display:none !important;
  }
  body.menu-open{
    overflow:auto !important;
  }
}
/* ============================================================
   NAV DRAWER (your actual class names)
   ============================================================ */
.nav-drawer-backdrop[hidden],
.nav-drawer[hidden]{
  display:none !important;
}

.nav-drawer-backdrop{
  position:fixed;
  inset:0;
  z-index:9998;
  background:rgba(0,0,0,0.55);
  opacity:0;
  pointer-events:none;
  transition:opacity 220ms ease;
}

.nav-drawer{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:min(92vw, 420px);
  z-index:9999;

  background: linear-gradient(to bottom, rgba(6,2,21,0.96), rgba(18,7,56,0.96));
  backdrop-filter: blur(14px);
  border-left:1px solid rgba(255,255,255,0.10);

  transform:translateX(104%);
  transition:transform 220ms ease;
  padding:1.1rem 1rem 1.2rem;
  overflow-y:auto;
}

body.menu-open .nav-drawer-backdrop{
  opacity:1;
  pointer-events:auto;
}

body.menu-open .nav-drawer{
  transform:translateX(0);
}

.nav-drawer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  padding-bottom:.8rem;
  border-bottom:1px solid rgba(255,255,255,0.10);
  margin-bottom:1rem;
}

.nav-drawer-title{
  font-family:"Bangers";
  letter-spacing:.16em;
  font-size:1.1rem;
  text-transform:uppercase;
}

.nav-drawer-links{
  display:grid;
  gap:.9rem;
  padding:.2rem 0 1rem;
}

.nav-drawer-links a{
  display:block;
  padding:1.05rem 1.05rem;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.05);
  box-shadow:0 16px 34px rgba(0,0,0,0.35);
  font-weight:800;
  font-size:1.05rem;
}

/* Close (X) button — matches your HTML */
.nav-drawer-close{
  width:44px;
  height:44px;
  border-radius:14px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(10px);

  color:var(--ink);
  font-size:1.6rem;
  line-height:1;
  font-weight:700;

  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
}

.nav-drawer-close:hover{
  background:rgba(255,255,255,0.14);
}

/* Never show the drawer/backdrop on desktop */
@media (min-width: 901px){
  #mobileNav,
  #navBackdrop{
    display:none !important;
  }
  body.menu-open{overflow:auto !important;}
}

/* ============================================================
   BOARD — grid cards
   ============================================================ */
.board-wrap{
  padding-bottom: 3.2rem;
  display:grid;
  gap:1.2rem;
}

.board-section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}

.board-section-head h2{
  font-family:"Bangers";
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:1.35rem;
}

.board-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1rem;
}

.board-card{
  border-radius:1.2rem;
  border:1px solid rgba(255,255,255,0.10);
  background:radial-gradient(circle at top left, rgba(255,255,255,0.12), rgba(6,2,22,0.96));
  box-shadow:0 18px 35px rgba(0,0,0,0.55);
  overflow:hidden;
  transition:transform .12s ease-out, border-color .12s ease-out;
}

.board-card:hover{
  transform:translateY(-2px);
  border-color:rgba(114,255,155,0.22);
}

.board-photo{
  aspect-ratio:1/1;
  width:100%;
  background:rgba(255,255,255,0.06);
}

.board-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.board-meta{
  padding:0.95rem 1rem 1.05rem;
  text-align:center;
}

.board-name{
  font-weight:900;
  font-size:1.05rem;
}

.board-role{
  margin-top:.25rem;
  color:var(--muted);
  font-size:.92rem;
  font-weight:700;
}

@media (max-width: 900px){
  .board-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width: 520px){
  .board-grid{grid-template-columns:1fr;}
}

/* ============================================================
   TEAMS — photo tiles (team name only)
   ============================================================ */
.teams-wrap{
  padding-bottom: 3.2rem;
  display:grid;
  gap:1.2rem;
}

.teams-section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}

.teams-section-head h2{
  font-family:"Bangers";
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:1.35rem;
}

.teams-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1rem;
}

.team-tile{
  border-radius:1.2rem;
  border:1px solid rgba(255,255,255,0.10);
  background:radial-gradient(circle at top left, rgba(255,255,255,0.10), rgba(6,2,22,0.96));
  box-shadow:0 18px 35px rgba(0,0,0,0.55);
  overflow:hidden;
  transition:transform .12s ease-out, border-color .12s ease-out;
}

.team-tile:hover{
  transform:translateY(-2px);
  border-color:rgba(114,255,155,0.20);
}

.team-tile-photo{
  aspect-ratio: 16 / 10;
  width:100%;
  background:rgba(255,255,255,0.06);
}

.team-tile-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.team-tile-name{
  padding:0.95rem 1rem 1.05rem;
  font-weight:900;
  font-size:1.05rem;
  line-height:1.2;
}

@media (max-width: 900px){
  .teams-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width: 520px){
  .teams-grid{grid-template-columns:1fr;}
}

/* ============================================================
   NAV DRAWER (matches your HTML classes)
   ============================================================ */
.nav-drawer-backdrop[hidden],
.nav-drawer[hidden]{
  display:none !important;
}

.nav-drawer-backdrop{
  position:fixed;
  inset:0;
  z-index:9998;
  background:rgba(0,0,0,0.55);
  opacity:0;
  pointer-events:none;
  transition:opacity 220ms ease;
}

.nav-drawer{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:min(92vw, 420px);
  z-index:9999;

  background: linear-gradient(to bottom, rgba(6,2,21,0.96), rgba(18,7,56,0.96));
  backdrop-filter: blur(14px);
  border-left:1px solid rgba(255,255,255,0.10);

  transform:translateX(104%);
  transition:transform 220ms ease;
  padding:1.1rem 1rem 1.2rem;
  overflow-y:auto;
}

body.menu-open .nav-drawer-backdrop{
  opacity:1;
  pointer-events:auto;
}

body.menu-open .nav-drawer{
  transform:translateX(0);
}

.nav-drawer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  padding-bottom:.8rem;
  border-bottom:1px solid rgba(255,255,255,0.10);
  margin-bottom:1rem;
}

.nav-drawer-title{
  font-family:"Bangers";
  letter-spacing:.16em;
  font-size:1.1rem;
  text-transform:uppercase;
}

.nav-drawer-links{
  display:grid;
  gap:.9rem;
  padding:.2rem 0 1rem;
}

.nav-drawer-links a{
  display:block;
  padding:1.05rem 1.05rem;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.05);
  box-shadow:0 16px 34px rgba(0,0,0,0.35);
  font-weight:800;
  font-size:1.05rem;
}

.nav-drawer-close{
  width:44px;
  height:44px;
  border-radius:14px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(10px);

  color:var(--ink);
  font-size:1.6rem;
  line-height:1;
  font-weight:700;

  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
}

/* ============================================================
   BOARD
   ============================================================ */
.board-wrap{
  padding-bottom: 3.2rem;
  display:grid;
  gap:1.2rem;
}

.board-section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}

.board-section-head h2{
  font-family:"Bangers";
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:1.35rem;
}

.board-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1rem;
}

.board-card{
  border-radius:1.2rem;
  border:1px solid rgba(255,255,255,0.10);
  background:radial-gradient(circle at top left, rgba(255,255,255,0.12), rgba(6,2,22,0.96));
  box-shadow:0 18px 35px rgba(0,0,0,0.55);
  overflow:hidden;
  transition:transform .12s ease-out, border-color .12s ease-out;
}

.board-card:hover{
  transform:translateY(-2px);
  border-color:rgba(114,255,155,0.22);
}

.board-photo{
  aspect-ratio:1/1;
  width:100%;
  background:rgba(255,255,255,0.06);
}

.board-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.board-meta{
  padding:0.95rem 1rem 1.05rem;
  text-align:center;
}

.board-name{
  font-weight:900;
  font-size:1.05rem;
}

.board-role{
  margin-top:.25rem;
  color:var(--muted);
  font-size:.92rem;
  font-weight:700;
}

@media (max-width: 900px){
  .board-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width: 520px){
  .board-grid{grid-template-columns:1fr;}
}

/* ============================================================
   TEAMS
   ============================================================ */
.teams-wrap{
  padding-bottom: 3.2rem;
  display:grid;
  gap:1.2rem;
}

.teams-section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}

.teams-section-head h2{
  font-family:"Bangers";
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:1.35rem;
}

.teams-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1rem;
}

.team-tile{
  border-radius:1.2rem;
  border:1px solid rgba(255,255,255,0.10);
  background:radial-gradient(circle at top left, rgba(255,255,255,0.10), rgba(6,2,22,0.96));
  box-shadow:0 18px 35px rgba(0,0,0,0.55);
  overflow:hidden;
  transition:transform .12s ease-out, border-color .12s ease-out;
}

.team-tile:hover{
  transform:translateY(-2px);
  border-color:rgba(114,255,155,0.20);
}

.team-tile-photo{
  aspect-ratio: 16 / 10;
  width:100%;
  background:rgba(255,255,255,0.06);
}

.team-tile-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.team-tile-name{
  padding:0.95rem 1rem 1.05rem;
  font-weight:900;
  font-size:1.05rem;
  line-height:1.2;
}

@media (max-width: 900px){
  .teams-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width: 520px){
  .teams-grid{grid-template-columns:1fr;}
}
/* ============================================================
   TEAMS — make images actually visible (override)
   ============================================================ */

.team-tile{
  background: rgba(0,0,0,0.18) !important;  /* stop the card bg from washing out the image */
}

.team-tile-photo{
  position: relative !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.team-tile-photo img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: relative !important;
  z-index: 2 !important;
  opacity: 1 !important;
  filter: none !important;
}

/* ensure the name bar is not overlapping the photo */
.team-tile-name{
  position: relative !important;
  z-index: 3 !important;
  background: linear-gradient(to top, rgba(6,2,22,0.88), rgba(6,2,22,0.20)) !important;
}