:root{
      --bg:#0b1020;          /* deep rink-night navy */
      --panel:#121833;
      --ink:#eaf1ff;
      --accent:#86e1ff;      /* ice blue */
      --accent-2:#ffd166;    /* warm highlight */
      --muted:#9fb3d1;
      --card:#0e1430cc;
      --radius:14px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --maxw:1100px;
    }
h1 {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #eaf1ff;
  text-shadow:
    0 0 5px #86e1ff,
    0 0 15px #86e1ff,
    0 0 25px rgba(134,225,255,0.7);
  margin: 20px 0;
}

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background: radial-gradient(1200px 700px at 20% -10%, #172148 0%, transparent 50%), linear-gradient(#0b1020, #0b1020);
      color:var(--ink);
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    }
    a{color:var(--accent); text-decoration:none}
    a:hover{text-decoration:underline}

    header{
      position:sticky; top:0; z-index:10;
      backdrop-filter: blur(8px);
      background: #0b1020cc;
      border-bottom: 1px solid #1c2448;
    }
    .nav{
      max-width:var(--maxw); margin:0 auto; padding:10px 18px;
      display:flex; align-items:center; justify-content:space-between; gap:12px;
    }
    .brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px}
    .brand .dot{width:10px; height:10px; border-radius:50%; background:var(--accent)}
    .nav a.btn{
      border:1px solid #25406c; padding:8px 14px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
    }
    .navlinks{display:flex; gap:14px; flex-wrap:wrap}
    .navlinks a{opacity:.9}
    .navlinks a:hover{opacity:1}

    .hero{
      max-width:var(--maxw); margin:20px auto 0; padding:28px 18px 10px;
      display:grid; gap:18px;
    }
    .hero h1{
      margin:0; font-size:clamp(28px, 3.8vw, 42px);
      line-height:1.1;
      letter-spacing:.2px;
      text-shadow: 0 2px 18px rgba(134,225,255,.18);
    }
    .subtitle{color:var(--muted); font-size:clamp(14px,1.8vw,16px)}

.carousel {
  position: relative;
  max-width: 1100px;   /* cap gallery width */
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  background: #000;    /* background behind letterboxing */
}

.carousel-rail {
  display: flex;
  transition: transform 0.6s ease;
}

.slide {
  min-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 500px;   /* cap gallery height */
}

.slide img {
  max-width: 100%;
  max-height: 500px;
  width: auto;
  height: auto;
  object-fit: contain; /* always shows full image */
}

/* arrows */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 24px;
  border-radius: 50%;
}
.arrow.left { left: 10px; }
.arrow.right { right: 10px; }

/* dots */
#dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
#dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: none;
  background: #aaa;
  cursor: pointer;
}
#dots button.active {
  background: #86e1ff;
}
    main{max-width:var(--maxw); margin:24px auto; padding:0 18px 80px}
    section{margin-top:34px}
    .section-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px}
    .section-head h2{margin:0; font-size:clamp(22px, 2.6vw, 28px)}
    .pill{font-size:12px; padding:6px 10px; border:1px solid #263a68; border-radius:999px; color:var(--muted)}

    .cards{
      display:grid; gap:14px;
      grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) );
    }
    .card{
      background:var(--card); border:1px solid #1a2146; border-radius:var(--radius); padding:14px 14px;
      box-shadow: var(--shadow);
    }
    .card h3{margin:6px 0 6px; font-size:18px}
    .meta{color:var(--muted); font-size:14px}
    ul.teamlist{margin:8px 0 0 18px}
    ul.teamlist li{margin:6px 0}

    .grid-2{
      display:grid; gap:16px;
      grid-template-columns: 1fr;
    }
    @media (min-width: 900px){
      .grid-2{grid-template-columns: 1.1fr .9fr}
    }

    .bio{
      background:linear-gradient(180deg, #0e1430e6, #0a112ae6);
      border:1px solid #1d2b55; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)
    }
    .bio dl{display:grid; grid-template-columns: auto 1fr; gap:10px 18px; margin:0}
    .bio dt{color:var(--muted)}
    .bio dd{margin:0}

    .cta{
      margin-top:22px; display:flex; gap:12px; flex-wrap:wrap
    }
    .btn{
      display:inline-flex; align-items:center; gap:8px;
      border:1px solid #25406c; background:#0e1732; color:var(--ink);
      padding:10px 14px; border-radius:10px; cursor:pointer;
    }
    .btn.primary{border-color:transparent; background:linear-gradient(135deg, var(--accent), #5db6ff)}
    .btn:hover{filter:brightness(1.05)}
    .note{font-size:13px; color:var(--muted)}

    footer{
      border-top:1px solid #1a244a; padding:20px 18px; color:#9cb4da; text-align:center;
      background:#0b1020;
    }
    .sr-only{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}

    /* Shared team card layout for BOTH sports */
.team-list {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.team-card {
  display: flex;
  align-items: center;      /* vertically centers logo with text */
  gap: 12px;                /* space between logo and text */
  background: #0e1430cc;
  border: 1px solid #1a2146;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.team-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.35);
}
.team-card h3 { margin: 0 0 6px; font-size: 18px; letter-spacing:.2px; }
.team-card .meta { margin: 0 0 10px; color: #9fb3d1; font-size: 14px }
.team-card ul { margin: 0; padding-left: 18px; font-size: 14px; }
.team-card li { margin: 6px 0; }

.social-links {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 20px 0;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}

/* Individual brand colors */
.social-btn.youtube { background: #ff0000; }
.social-btn.email { background: #0072c6; }
.social-btn.instagram { 
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.social-btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.1);
}

/* Contact box */
.contact-box {
  background: #0e1430cc;
  border: 1px solid #1a2146;
  border-radius: 12px;
  padding: 20px;
  max-width: 500px;
  margin: 40px auto;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.contact-box h2 {
  margin-top: 0;
  font-size: 24px;
  color: #fff;
}

.contact-box p {
  margin: 8px 0 16px;
  color: #9fb3d1;
}


.team-card .team-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;           /* keeps icon from shrinking */
}