/* ============================================================
BASE VARIABLES & RESET
============================================================ */

:root {

  --navy: #0a1628 !important;

  --dark-navy: #060e1a !important;

  --blue: #1a3a6b !important;

  --accent: #4a9eff !important;

  --gold: #c8a84b !important;

  --white: #f0f4ff !important;

  --gray: #8a9bb5 !important;

  --light-gray: #1e2d45 !important;

  --section-pad: clamp(48px, 8vw, 80px) !important;

  --side-pad: clamp(18px, 5vw, 60px) !important;

}

*, *::before, *::after {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

html {
  scroll-behavior: smooth !important;
}

body {
  background: var(--dark-navy) !important;
  color: var(--white) !important;
  font-family: 'Barlow', sans-serif !important;
  overflow-x: hidden !important;
  -webkit-font-smoothing: antialiased !important;
}

img {
  max-width: 100% !important;
  display: block !important;
}

a {
  text-decoration: none !important;
}

/* ============================================================
NAVIGATION
============================================================ */

nav {

  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 200 !important;

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

  padding: 14px var(--side-pad) !important;

  background: rgba(6,14,26,0.95) !important;
  backdrop-filter: blur(16px) !important;

  border-bottom: 1px solid rgba(74,158,255,0.15) !important;

}

.nav-logo {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(1.4rem, 3vw, 2.75rem) !important;
  letter-spacing: 2px !important;
  color: var(--white) !important;
}

.nav-logo span {
  color: var(--accent) !important;
}

.nav-links {
  display: flex !important;
  gap: clamp(14px, 2vw, 24px) !important;
  list-style: none !important;
}

.nav-links a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(0.78rem, 1.2vw, 1.355rem) !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--white) !important;
  transition: color 0.2s !important;
}

.nav-links a:hover {
  color: var(--accent) !important;
}

/* Hamburger */

.nav-toggle {
  display: none !important;
  flex-direction: column !important;
  gap: 5px !important;
  cursor: pointer !important;
  padding: 4px !important;
  background: none !important;
  border: none !important;
}

.nav-toggle span {
  width: 22px !important;
  height: 2px !important;
  background: var(--white) !important;
  border-radius: 2px !important;
  transition: all 0.3s !important;
  display: block !important;
}

.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg) !important;
}

.nav-toggle.open span:nth-child(2) {
  opacity: 0 !important;
}

.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg) !important;
}

.mobile-menu {

  display: none !important;
  position: fixed !important;
  top: 56px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 190 !important;

  background: rgba(6,14,26,0.98) !important;
  backdrop-filter: blur(16px) !important;

  border-bottom: 1px solid rgba(74,158,255,0.15) !important;

  padding: 0 !important;

  transform: translateY(-100%) !important;

  transition: transform 0.35s ease !important;

}

.mobile-menu.open {
  transform: translateY(0) !important;
}

.mobile-menu a {
  display: block !important;
  padding: 16px var(--side-pad) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--gray) !important;
  border-bottom: 1px solid rgba(74,158,255,0.08) !important;
  transition: all 0.2s !important;
}

.mobile-menu a:hover {
  color: var(--accent) !important;
  background: rgba(74,158,255,0.05) !important;
  padding-left: calc(var(--side-pad) + 6px) !important;
}

/* ============================================================
HERO
============================================================ */

.hero {

  position: relative !important;
  min-height: 100vh !important;
  display: grid !important;

  grid-template-columns: 1fr 1fr !important;
  overflow: hidden !important;

}

.hero-bg {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(125deg, #060e1a 0%, #0b1a35 45%, #060e1a 100%) !important;
}

.hero-grid {
  position: absolute !important;
  inset: 0 !important;
  background-image: linear-gradient(rgba(74,158,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(74,158,255,0.04) 1px, transparent 1px) !important;
  background-size: 60px 60px !important;
}

.hero-img-panel {

  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 54% !important;

  clip-path: polygon(7% 0, 100% 0, 100% 100%, 0% 100%) !important;

  overflow: hidden !important;

}

.hero-img-panel img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  filter: brightness(0.72) contrast(1.1) !important;
}

.hero-img-panel::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to right, var(--dark-navy) 0%, transparent 25%, transparent 75%, rgba(6,14,26,0.3) 100%) !important;
}

.hero-content {

  position: relative !important;
  z-index: 10 !important;
  grid-column: 1 !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  padding: 100px var(--side-pad) 100px !important;

}

.hero-number {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(6rem,16vw,16rem) !important;
  line-height: 1 !important;
  color: rgba(74,158,255,0.05) !important;
  position: absolute !important;
  left: -20px !important;
  top: 50% !important;
  transform: translateY(-55%) !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 0 !important;
}

.hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(74,158,255,0.1) !important;
  border: 1px solid rgba(74,158,255,0.3) !important;
  border-radius: 4px !important;
  padding: 6px 14px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(0.6rem,1.2vw,1.72rem) !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  margin-bottom: 16px !important;
  width: fit-content !important;
  animation: fadeUp 0.6s ease both !important;
  position: relative !important;
  z-index: 2 !important;
}

.hero-badge::before {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--accent) !important;
  border-radius: 50% !important;
  animation: blink 2s infinite !important;
  flex-shrink: 0 !important;
}

@keyframes blink {
  0%,100% {
    opacity:1 !important;
  }
  50% {
    opacity:0.3 !important;
  }
}

.hero-name {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(2.8rem, 6.5vw, 6.2rem) !important;
  line-height: 0.9 !important;
  letter-spacing: 2px !important;
  position: relative !important;
  z-index: 2 !important;
  animation: fadeUp 0.6s 0.1s ease both !important;
}

.hero-name .last {
  color: var(--accent) !important;
}

.hero-award-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, rgba(200,168,75,0.14), rgba(200,168,75,0.05)) !important;
  border: 1px solid rgba(200,168,75,0.4) !important;
  border-radius: 6px !important;
  padding: 8px 15px !important;
  margin: 12px 0 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(0.82rem, 1.4vw, 1.7rem) !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  width: fit-content !important;
  animation: fadeUp 0.6s 0.15s ease both !important;
  position: relative !important;
  z-index: 2 !important;
}

.hero-positions {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(0.95rem, 1.5vw, 1.75rem) !important;
  font-weight: 600 !important;
  letter-spacing: clamp(2px,0.4vw,4px) !important;
  text-transform: uppercase !important;
  color: var(--white) !important;
  margin: 4px 0 6px !important;
  position: relative !important;
  z-index: 2 !important;
  animation: fadeUp 0.6s 0.2s ease both !important;
}

.hero-school {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(1.05rem, 1.6vw, 1.85rem) !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 26px !important;
  position: relative !important;
  z-index: 2 !important;
  animation: fadeUp 0.6s 0.25s ease both !important;
}

.hero-btns {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 28px !important;
  position: relative !important;
  z-index: 2 !important;
  animation: fadeUp 0.6s 0.35s ease both !important;
}

.btn-primary {
  background: var(--accent) !important;
  color: var(--dark-navy) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(0.82rem, 1.3vw, 1.72rem) !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 13px 22px !important;
  border-radius: 4px !important;
  transition: all 0.2s !important;
  display: inline-block !important;
}

.btn-primary:hover {
  background: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(74,158,255,0.4) !important;
}

.btn-outline {
  border: 2px solid rgba(255,255,255,0.17) !important;
  color: var(--white) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(0.82rem, 1.3vw, 1.72rem) !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 11px 18px !important;
  border-radius: 4px !important;
  transition: all 0.2s !important;
  display: inline-block !important;
}

.btn-outline:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  transform: translateY(-2px) !important;
}

.hero-socials {
  display: flex !important;
  gap: 10px !important;
  position: relative !important;
  z-index: 2 !important;
  animation: fadeUp 0.6s 0.45s ease both !important;
  flex-wrap: wrap !important;
}

.social-icon {
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  color: var(--gray) !important;
  font-size: 2.88rem !important;
  transition: all 0.2s !important;
}

.social-icon:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: rgba(74,158,255,0.08) !important;
}

.hero-stats-bar {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 20 !important;
  display: flex !important;
  background: rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(10px) !important;
  border-top: 1px solid rgba(74,158,255,0.2) !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.hero-stats-bar::-webkit-scrollbar {
  height: 2px !important;
}

.hero-stats-bar::-webkit-scrollbar-thumb {
  background: rgba(74,158,255,0.3) !important;
}

.hero-stat {
  flex: 0 0 auto !important;
  min-width: 80px !important;
  padding: 14px 10px !important;
  text-align: center !important;
  border-right: 1px solid rgba(74,158,255,0.1) !important;
}

.hero-stat:last-child {
  border-right: none !important;
}

.hero-stat-val {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(1.4rem, 2.5vw, 2.6rem) !important;
  color: var(--accent) !important;
  line-height: 1 !important;
}

.hero-stat-label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(0.55rem,1vw,1.62rem) !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--gray) !important;
  margin-top: 3px !important;
  white-space: nowrap !important;
}

@keyframes fadeUp {
  from {
    opacity:0 !important;
    transform:translateY(20px) !important;
  }
  to {
    opacity:1 !important;
    transform:translateY(0) !important;
  }
}

/* ============================================================
AWARDS BANNER
============================================================ */

.awards-banner {
  background: linear-gradient(135deg, rgba(200,168,75,0.1), rgba(26,58,107,0.35)) !important;
  border-top: 1px solid rgba(200,168,75,0.18) !important;
  border-bottom: 1px solid rgba(200,168,75,0.18) !important;
  padding: clamp(16px,3vw,24px) var(--side-pad) !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.awards-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(12px,2vw,32px) !important;
  flex-wrap: wrap !important;
}

.award-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  background: rgba(200,168,75,0.07) !important;
  border: 1px solid rgba(200,168,75,0.22) !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
}

.award-name {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(1.56rem, 1.8vw, 1.9rem) !important;
  letter-spacing: 1px !important;
  color: var(--gold) !important;
}

.award-detail {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(1.65rem,0.2vw,1.75rem) !important;
  color: var(--gray) !important;
}

/* ============================================================
SECTION UTILITY
============================================================ */

.page-section {
  padding: var(--section-pad) var(--side-pad) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.full-section {
  padding: var(--section-pad) 0 !important;
}

.full-section-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 var(--side-pad) !important;
}

.section-label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.section-label::after {
  content: '' !important;
  flex: 0 0 36px !important;
  height: 1px !important;
  background: var(--accent) !important;
}

.section-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(1.8rem, 4vw, 3.6rem) !important;
  letter-spacing: 2px !important;
  line-height: 1 !important;
  margin-bottom: clamp(24px, 4vw, 36px) !important;
}

.divider {
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(to right, transparent, rgba(74,158,255,0.2), transparent) !important;
}

.dark-bg {
  background: rgba(6,14,26,0.97) !important;
}

.mid-bg {
  background: rgba(10,22,40,0.9) !important;
}

/* ============================================================
PLAYER PROFILE GRID
============================================================ */

.profile-wrapper {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(74,158,255,0.12) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.profile-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
}

.profile-item {
  padding: clamp(14px,2.5vw,22px) clamp(16px,3vw,26px) !important;
  border-right: 1px solid rgba(74,158,255,0.08) !important;
  border-bottom: 1px solid rgba(74,158,255,0.08) !important;
}

.profile-item:nth-child(3n) {
  border-right: none !important;
}

.profile-item-label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--gray) !important;
  margin-bottom: 4px !important;
}

.profile-item-val {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(1.12rem, 1.8vw, 1.95rem) !important;
  font-weight: 700 !important;
  color: var(--white) !important;
}

.hl {
  color: var(--accent) !important;
}

.gold {
  color: var(--gold) !important;
}

/* ============================================================
ABOUT
============================================================ */

.about-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(28px, 5vw, 56px) !important;
  align-items: center !important;
}

.about-image {
  border-radius: 10px !important;
  overflow: hidden !important;
  position: relative !important;
}

.about-image img {
  width: 100% !important;
  height: clamp(320px, 45vw, 520px) !important;
  object-fit: cover !important;
  object-position: top !important;
}

.about-image::before {
  content:'' !important;
  position:absolute !important;
  inset:-1px !important;
  border-radius:10px !important;
  padding:1px !important;
  background:linear-gradient(135deg, var(--accent), transparent, var(--gold)) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;
  pointer-events:none !important;
  z-index:1 !important;
}

.about-text p {
  font-size: clamp(0.88rem,1.5vw,1.60rem) !important;
  line-height: 1.85 !important;
  color: #a0b4cc !important;
  margin-bottom: 14px !important;
}

.about-text p strong {
  color: var(--white) !important;
}

/* ============================================================
STAT HIGHLIGHT CARDS
============================================================ */

.stats-highlight {
  display: grid !important;
  grid-template-columns: repeat(5,1fr) !important;
  gap: clamp(10px,1.5vw,14px) !important;
  margin-bottom: clamp(24px,4vw,36px) !important;
}

.stat-card {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(74,158,255,0.12) !important;
  border-radius: 10px !important;
  padding: clamp(14px,2.5vw,22px) clamp(10px,1.5vw,16px) !important;
  text-align: center !important;
  transition: all 0.25s !important;
  cursor: default !important;
}

.stat-card:hover {
  border-color: var(--accent) !important;
  background: rgba(74,158,255,0.06) !important;
  transform: translateY(-3px) !important;
}

.stat-card.gold-card {
  border-color: rgba(200,168,75,0.3) !important;
  background: rgba(200,168,75,0.05) !important;
}

.stat-card.gold-card:hover {
  border-color: var(--gold) !important;
  background: rgba(200,168,75,0.1) !important;
}

.stat-card-val {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(1.6rem,3.5vw,2.4rem) !important;
  line-height: 1 !important;
  color: var(--accent) !important;
}

.stat-card.gold-card .stat-card-val {
  color: var(--gold) !important;
}

.stat-card-label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(0.58rem,1vw,1.68rem) !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--gray) !important;
  margin-top: 5px !important;
}

.stat-card-sub {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(0.6rem,1vw,2.72rem) !important;
  color: rgba(138,155,181,0.7) !important;
  margin-top: 2px !important;
}

/* ============================================================
STATS TABLES
============================================================ */

.stats-table-wrap {
  overflow-x: auto !important;
  border-radius: 10px !important;
  border: 1px solid rgba(74,158,255,0.1) !important;
  -webkit-overflow-scrolling: touch !important;
}

.stats-table-wrap + .stats-table-wrap {
  margin-top: 20px !important;
}

table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  min-width: 500px !important;
}

.table-section-header td {
  background: rgba(74,158,255,0.06) !important;
  padding: 9px 13px !important;
  font-size: 1.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  border-bottom: 1px solid rgba(74,158,255,0.15) !important;
}

thead tr {
  background: rgba(74,158,255,0.06) !important;
  border-bottom: 2px solid rgba(74,158,255,0.18) !important;
}

th {
  padding: 10px 12px !important;
  font-size: 1.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  text-align: left !important;
  white-space: nowrap !important;
}

tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  transition: background 0.15s !important;
}

tbody tr:hover {
  background: rgba(74,158,255,0.04) !important;
}

tr.total-row {
  background: rgba(74,158,255,0.06) !important;
  border-top: 1px solid rgba(74,158,255,0.2) !important;
}

tr.total-row td {
  color: var(--white) !important;
  font-weight: 700 !important;
}

td {
  padding: 10px 12px !important;
  font-size: 1.86rem !important;
  color: #c0cfe0 !important;
  white-space: nowrap !important;
}

td:first-child {
  font-weight: 700 !important;
  color: var(--white) !important;
}

.td-hl {
  color: var(--accent) !important;
  font-weight: 700 !important;
}

.td-gold {
  color: var(--gold) !important;
  font-weight: 700 !important;
}

.stats-note {
  font-size: 1.74rem !important;
  color: var(--gray) !important;
  margin-top: 12px !important;
  font-style: italic !important;
  line-height: 1.5 !important;
}

.stats-note a {
  color: var(--accent) !important;
}

.stats-tables-stack > * + * {
  margin-top: 20px !important;
}

/* ============================================================
STRENGTHS
============================================================ */

.strengths-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: clamp(10px,1.5vw,14px) !important;
}

.strength-card {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(74,158,255,0.1) !important;
  border-radius: 10px !important;
  padding: clamp(18px,3vw,26px) clamp(12px,2vw,18px) !important;
  text-align: center !important;
  transition: all 0.3s !important;
  cursor: default !important;
}

.strength-card:hover {
  border-color: var(--accent) !important;
  background: rgba(74,158,255,0.06) !important;
  transform: translateY(-4px) !important;
}

.strength-icon {
  font-size: clamp(1.4rem,2.5vw,2.8rem) !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.strength-name {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(0.72rem,1.3vw,1.88rem) !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--white) !important;
  margin-bottom: 7px !important;
}

.strength-bar {
  width: 100% !important;
  height: 5px !important;
  background: rgba(255,255,255,0.07) !important;
  border-radius: 2px !important;
  margin: 7px 0 5px !important;
  overflow: hidden !important;
}

.strength-fill {
  height: 100% !important;
  background: linear-gradient(90deg, var(--accent), #7dd3fc) !important;
  border-radius: 2px !important;
  width: 0% !important;
  transition: width 1.2s ease !important;
}

.strength-pct {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1.66rem !important;
  color: var(--gray) !important;
}

/* ============================================================
FILM
============================================================ */

.film-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(12px,2vw,16px) !important;
}

.film-card {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(74,158,255,0.12) !important;
  border-radius: 10px !important;
  padding: clamp(18px,3vw,28px) !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(14px,2.5vw,20px) !important;
  transition: all 0.25s !important;
}

.film-card:hover {
  border-color: var(--accent) !important;
  background: rgba(74,158,255,0.06) !important;
  transform: translateX(4px) !important;
}

.film-logo {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  border-radius: 10px !important;
  background: var(--accent) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1rem !important;
  color: var(--dark-navy) !important;
}

.film-info-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(1.1rem,2vw,2.3rem) !important;
  letter-spacing: 1px !important;
  color: var(--white) !important;
  margin-bottom: 4px !important;
}

.film-info-sub {
  font-size: clamp(0.74rem,1.3vw,1.8rem) !important;
  color: var(--gray) !important;
  line-height: 1.5 !important;
}

/* ============================================================
GALLERY
============================================================ */

.gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  grid-template-rows: 240px 240px !important;
  gap: 10px !important;
}

.gallery-item {
  border-radius: 8px !important;
  overflow: hidden !important;
  position: relative !important;
  background: var(--light-gray) !important;
}

.gallery-item.wide {
  grid-column: span 2 !important;
}

.gallery-item.tall {
  grid-row: span 2 !important;
}

.gallery-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  transition: transform 0.5s !important;
}

.gallery-item:hover img {
  transform: scale(1.05) !important;
}

.gallery-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(6,14,26,0.75) 0%, transparent 55%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 12px !important;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1 !important;
}

.gallery-caption {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--white) !important;
}

/* ============================================================
COMMUNITY
============================================================ */

.community-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(28px,5vw,52px) !important;
  align-items: center !important;
}

.community-image {
  border-radius: 10px !important;
  overflow: hidden !important;
}

.community-image img {
  width: 100% !important;
  height: clamp(280px,40vw,420px) !important;
  object-fit: cover !important;
  object-position: center !important;
}

.community-text p {
  font-size: clamp(0.88rem,1.6vw,1.56rem) !important;
  line-height: 1.85 !important;
  color: #a0b4cc !important;
  margin-bottom: 14px !important;
}

.community-text p strong {
  color: var(--white) !important;
}

.community-highlights {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

.comm-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(0.85rem,1.5vw,1.94rem) !important;
  font-weight: 600 !important;
  color: var(--white) !important;
}

.comm-dot {
  width: 7px !important;
  height: 7px !important;
  background: var(--accent) !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* ============================================================
ACCOMPLISHMENTS
============================================================ */

.accomplishments-grid {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: clamp(12px,2vw,18px) !important;
  margin-bottom: clamp(24px,4vw,40px) !important;
}

.accomplish-card {
  background: rgba(74,158,255,0.06) !important;
  border: 1px solid rgba(74,158,255,0.2) !important;
  border-radius: 10px !important;
  padding: clamp(18px,3vw,28px) clamp(14px,2.5vw,22px) !important;
  text-align: center !important;
  transition: all 0.25s !important;
}

.accomplish-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--accent) !important;
}

.accomplish-card.gold-card {
  background: rgba(200,168,75,0.07) !important;
  border-color: rgba(200,168,75,0.25) !important;
}

.accomplish-card.gold-card:hover {
  border-color: var(--gold) !important;
}

.accomplish-icon {
  font-size: clamp(1.5rem,3vw,5rem) !important;
  margin-bottom: 9px !important;
}

.accomplish-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(0.95rem,1.8vw,2.15rem) !important;
  letter-spacing: 1px !important;
  color: var(--accent) !important;
  margin-bottom: 5px !important;
}

.accomplish-card.gold-card .accomplish-title {
  color: var(--gold) !important;
}

.accomplish-detail {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(0.7rem,1.2vw,1.78rem) !important;
  color: var(--gray) !important;
  line-height: 1.5 !important;
}

.poster-wrap {
  text-align: center !important;
}

.poster-wrap img {
  max-width: clamp(240px,50vw,400px) !important;
  width: 100% !important;
  border-radius: 10px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
  margin: 0 auto !important;
}

/* ============================================================
ACADEMICS
============================================================ */

.academics-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(16px,2.5vw,32px) !important;
}

.info-block {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(74,158,255,0.1) !important;
  border-radius: 10px !important;
  padding: clamp(18px,3vw,26px) !important;
}

.info-block-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(1rem,2vw,2.25rem) !important;
  letter-spacing: 1px !important;
  color: var(--accent) !important;
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(74,158,255,0.1) !important;
}

.info-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  gap: 12px !important;
}

.info-row:last-child {
  border-bottom: none !important;
}

.info-key {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(0.65rem,1.1vw,1.72rem) !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--gray) !important;
  flex-shrink: 0 !important;
}

.info-val {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(0.78rem,1.4vw,1.9rem) !important;
  font-weight: 600 !important;
  color: var(--white) !important;
  text-align: right !important;
}

/* ============================================================
SOCIAL / CONNECT
============================================================ */

.connect-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(24px,4vw,40px) !important;
  align-items: start !important;
}

.social-list {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.social-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 15px !important;
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(74,158,255,0.08) !important;
  border-radius: 8px !important;
  transition: all 0.2s !important;
}

.social-row:hover {
  border-color: var(--accent) !important;
  background: rgba(74,158,255,0.06) !important;
  transform: translateX(4px) !important;
}

.social-row-icon {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
}

.ig {
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045) !important;
}

.tw {
  background: #000 !important;
  border: 1px solid #333 !important;
}

.hudl {
  background: #ff6600 !important;
}

.yt {
  background: #ff0000 !important;
}

.tt {
  background: #111 !important;
  border: 1px solid #69c9d0 !important;
}

.social-row-name {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1.9rem !important;
  font-weight: 700 !important;
  color: var(--white) !important;
}

.social-row-handle {
  font-size: 1.72rem !important;
  color: var(--gray) !important;
  margin-top: 1px !important;
}

.social-note {
  margin-top: 16px !important;
  font-size: clamp(1.75rem,1.3vw,1.82rem) !important;
  color: var(--gray) !important;
  font-style: italic !important;
  line-height: 1.7 !important;
  padding: 12px 15px !important;
  border-left: 2px solid var(--accent) !important;
  background: rgba(74,158,255,0.04) !important;
  border-radius: 0 6px 6px 0 !important;
}

.quick-links {
  margin-top: 34px !important;
}

.quick-links .section-label {
  margin-bottom: 14px !important;
}

.quick-links-btns {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* ============================================================
CONTACT
============================================================ */

.contact-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(28px,5vw,52px) !important;
}

.contact-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

.form-label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--gray) !important;
}

.form-input, .form-textarea {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(74,158,255,0.14) !important;
  border-radius: 6px !important;
  padding: 10px 13px !important;
  color: var(--white) !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 1.48rem !important;
  outline: none !important;
  transition: border-color 0.2s !important;
  width: 100% !important;
}

.form-input:focus, .form-textarea:focus {
  border-color: var(--accent) !important;
}

.form-textarea {
  resize: vertical !important;
  min-height: 110px !important;
}

.btn-submit {
  background: var(--accent) !important;
  color: var(--dark-navy) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 13px 26px !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  align-self: flex-start !important;
}

.btn-submit:hover {
  background: #fff !important;
  transform: translateY(-2px) !important;
}

.form-success {
  display:none !important;
  color:var(--accent) !important;
  font-family:'Barlow Condensed',sans-serif !important;
  font-size:1.85rem !important;
  padding:12px !important;
  background:rgba(74,158,255,0.08) !important;
  border-radius:6px !important;
  border:1px solid rgba(74,158,255,0.2) !important;
  margin-top: 4px !important;
}

.form-error-msg {
  display:none !important;
  color:#ff6b6b !important;
  font-family:'Barlow Condensed',sans-serif !important;
  font-size:1.85rem !important;
  padding:12px !important;
  background:rgba(255,107,107,0.08) !important;
  border-radius:6px !important;
  border:1px solid rgba(255,107,107,0.25) !important;
  margin-top:4px !important;
  align-items:center !important;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.contact-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.contact-info-item {
  display: flex !important;
  gap: 12px !important;
  padding: 14px !important;
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(74,158,255,0.08) !important;
  border-radius: 8px !important;
}

.contact-info-icon {
  font-size: 1.1rem !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.contact-info-label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--gray) !important;
  margin-bottom: 3px !important;
}

.contact-info-val {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(0.82rem,1.5vw,1.92rem) !important;
  font-weight: 600 !important;
  color: var(--white) !important;
}

.contact-info-val a {
  color: var(--accent) !important;
}

/* ============================================================
FOOTER
============================================================ */

footer {
  background: var(--dark-navy) !important;
  border-top: 1px solid rgba(74,158,255,0.1) !important;
  padding: clamp(24px,4vw,36px) var(--side-pad) !important;
}

.footer-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: clamp(16px,3vw,20px) !important;
}

.footer-brand {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(1rem,2.5vw,1.80rem) !important;
  letter-spacing: 2px !important;
}

.footer-brand span {
  color: var(--accent) !important;
}

.footer-sub {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(0.6rem,1.1vw,1.20rem) !important;
  letter-spacing: 1px !important;
  color: var(--gray) !important;
  margin-top: 3px !important;
  line-height: 1.5 !important;
}

.footer-links {
  display: flex !important;
  gap: clamp(12px,2vw,20px) !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

.footer-links a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(0.65rem,1.2vw,1.75rem) !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--gray) !important;
  transition: color 0.2s !important;
}

.footer-links a:hover {
  color: var(--accent) !important;
}

.footer-socials {
  display: flex !important;
  gap: 8px !important;
}

.footer-social {
  width: 30px !important;
  height: 30px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.8rem !important;
  color: var(--gray) !important;
  transition: all 0.2s !important;
}

.footer-social:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ============================================================
RESPONSIVE BREAKPOINTS
============================================================ */

/* Tablet: 901px – 1100px */

@media (max-width: 1100px) {

  .hero-img-panel {
    width: 50% !important;
  }

  .strengths-grid {
    grid-template-columns: repeat(4,1fr) !important;
  }

  .gallery-grid {
    grid-template-rows: 200px 200px !important;
  }

}

/* Tablet portrait: 601px – 900px */

@media (max-width: 900px) {

  /* Nav */

  .nav-links {
    display: none !important;
  }

  .nav-toggle {
    display: flex !important;
  }

  .mobile-menu {
    display: block !important;
  }

  /* Hero */

  .hero {
    grid-template-columns: 1fr !important;
    min-height: 100svh !important;
  }

  .hero-img-panel {

    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    clip-path: none !important;

    opacity: 0.18 !important;

  }

  .hero-img-panel img {
    object-position: center top !important;
  }

  .hero-img-panel::after {
    background: none !important;
  }

  .hero-content {
    grid-column: 1 !important;
    padding: 90px clamp(18px,5vw,40px) 90px !important;
  }

  .hero-stats-bar {
    position: static !important;
    margin-top: 0 !important;
  }

  /* Profile */

  .profile-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .profile-item:nth-child(3n) {
    border-right: 1px solid rgba(74,158,255,0.08) !important;
  }

  .profile-item:nth-child(2n) {
    border-right: none !important;
  }

  /* Stats */

  .stats-highlight {
    grid-template-columns: repeat(3,1fr) !important;
  }

  /* About, Community, Connect, Contact, Academics */

  .about-grid,   .community-grid,   .connect-grid,   .contact-grid,   .academics-grid {
    grid-template-columns: 1fr !important;
    gap: clamp(24px,5vw,40px) !important;
  }

  .about-image img {
    height: clamp(260px,55vw,400px) !important;
  }

  /* Strengths */

  .strengths-grid {
    grid-template-columns: repeat(2,1fr) !important;
  }

  /* Film */

  .film-grid {
    grid-template-columns: 1fr !important;
  }

  /* Gallery */

  .gallery-grid {

    grid-template-columns: 1fr 1fr !important;

    grid-template-rows: repeat(5, 200px) !important;

  }

  .gallery-item.tall {
    grid-row: span 2 !important;
  }

  .gallery-item.wide {
    grid-column: 1 / 3 !important;
  }

  /* Accomplishments */

  .accomplishments-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Awards banner */

  .awards-inner {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
  }

  .award-item {
    flex-shrink: 0 !important;
  }

  /* Footer */

  .footer-inner {
    flex-direction: column !important;
    text-align: center !important;
  }

  .footer-links {
    justify-content: center !important;
  }

}

/* Mobile: ≤ 600px */

@media (max-width: 600px) {

  :root {
    --section-pad: 40px !important;
    --side-pad: 18px !important;
  }

  /* Hero */

  .hero-name {
    font-size: clamp(2.4rem, 10vw, 3.5rem) !important;
  }

  .hero-badge {
    font-size: 0.58rem !important;
    letter-spacing: 1.5px !important;
  }

  .hero-award-badge {
    font-size: 0.68rem !important;
    padding: 7px 12px !important;
  }

  .hero-btns {
    gap: 8px !important;
  }

  .btn-primary, .btn-outline {
    font-size: 0.72rem !important;
    padding: 11px 16px !important;
  }

  .hero-number {
    font-size: 5rem !important;
  }

  /* Stats bar */

  .hero-stat {
    min-width: 70px !important;
    padding: 12px 6px !important;
  }

  /* Stats highlight */

  .stats-highlight {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Profile grid */

  .profile-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Gallery */

  .gallery-grid {

    grid-template-columns: 1fr !important;

    grid-template-rows: auto !important;

  }

  .gallery-item {
    height: 220px !important;
  }

  .gallery-item.tall, .gallery-item.wide {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 220px !important;
  }

  /* Accomplishments */

  .accomplishments-grid {
    grid-template-columns: 1fr !important;
  }

  /* Awards banner */

  .awards-inner {
    gap: 10px !important;
  }

  /* Film */

  .film-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* Academics */

  .academics-grid {
    grid-template-columns: 1fr !important;
  }

  /* Footer */

  .footer-sub {
    display: none !important;
  }

}

/* Very small screens */

@media (max-width: 380px) {

  .hero-name {
    font-size: 2.2rem !important;
  }

  .stats-highlight {
    grid-template-columns: 1fr 1fr !important;
  }

  .profile-grid {
    grid-template-columns: 1fr !important;
  }

  .profile-item:nth-child(3n),   .profile-item:nth-child(2n) {
    border-right: none !important;
  }

}